Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.86/7: Рейтинг темы: голосов - 7, средняя оценка - 4.86
8 / 0 / 2
Регистрация: 11.06.2016
Сообщений: 261
1

Позиционирование строчного элемента

23.06.2016, 23:45. Просмотров 1370. Ответов 18
Метки нет (Все метки)

Здравствуйте! Если внутри блока есть элементы которые нужно спозиционировать/расставить отступы друг от друга относительно данного блока.
Мы можем это сделать с помощью relative(top и тд) или margin.
Как будет правильней?)
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
23.06.2016, 23:45
Ответы с готовыми решениями:

Позиционирование элемента
Я позиционирую надпись "Мой сайт", подвинул ее так как мне нужно http://************/afwe1s но при...

Позиционирование элемента
Здравствуйте, имею следующий код <div id="someField"> someField1 </div> <div id="root"> ...

Позиционирование элемента :: before
Здравствуйте подскажите как можно спозиционировать элемент before что бы он был в блоке .<div...

Позиционирование элемента
Всем привет! Столкнулся с такой проблемой: есть картинка, заданная через img. Ее надо разместить в...

18
Модератор
Эксперт JSЭксперт HTML/CSS
3390 / 2416 / 1439
Регистрация: 12.07.2015
Сообщений: 6,244
Записей в блоге: 4
23.06.2016, 23:52 2
marketarea, надо плясать от конкретной ситуации. Например, если родитель абсолютно спозиционирован, то чтобы не городить новые обертки, лучше использовать margin.
0
8 / 0 / 2
Регистрация: 11.06.2016
Сообщений: 261
23.06.2016, 23:55  [ТС] 3
Например, родитель relative, внутри родителя нужно спозиционировать <a> относительно <h3>
мне что <a> нужно помещать в <div> для того чтобы его спозиционировать или я могу применить непосредственно к нему relative или margin?
0
Модератор
Эксперт JSЭксперт HTML/CSS
3390 / 2416 / 1439
Регистрация: 12.07.2015
Сообщений: 6,244
Записей в блоге: 4
23.06.2016, 23:59 4
marketarea, ссылке можно дать абсолютное позиционирование. Но если ссылка идет в непосредственной близости от заголовка и от него надо просто отступить, то лучше маргином.
0
8 / 0 / 2
Регистрация: 11.06.2016
Сообщений: 261
24.06.2016, 00:01  [ТС] 5
тоесть нет какого нибудь правила или еще чегото которое говорит что лучше использовать тото но если ... то лучше тото)?
0
Модератор
Эксперт JSЭксперт HTML/CSS
3390 / 2416 / 1439
Регистрация: 12.07.2015
Сообщений: 6,244
Записей в блоге: 4
24.06.2016, 00:03 6
можно привести код, хотя бы одним способом? А то так гадать долго можно
0
8 / 0 / 2
Регистрация: 11.06.2016
Сообщений: 261
24.06.2016, 00:04  [ТС] 7
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div class="louis">
                <h3>Louis XX</h3>
                <ul>
                    <li><span>Designer</span>:Philippe Starck</li>
                    <li><span>Typology</span>:Chairs</li>
                    <li><span>Client</span>:Vitra</li>
                    <li><span>Year</span>:2012</li>
                </ul>
                <a href="#">View project</a>
                <a href="#"><img src="img/heart_w.png"></a>
                <span>+200</span>
</div>
0
Модератор
Эксперт JSЭксперт HTML/CSS
3390 / 2416 / 1439
Регистрация: 12.07.2015
Сообщений: 6,244
Записей в блоге: 4
24.06.2016, 00:06 8
И куда надо ссылку установить?
0
8 / 0 / 2
Регистрация: 11.06.2016
Сообщений: 261
24.06.2016, 00:08  [ТС] 9
заголовок, ниже список, ниже ссылка, ниже ссылка-картинка, ниже спан.

Добавлено через 27 секунд
с нижним отступами в 20пх
0
Модератор
Эксперт JSЭксперт HTML/CSS
3390 / 2416 / 1439
Регистрация: 12.07.2015
Сообщений: 6,244
Записей в блоге: 4
24.06.2016, 00:10 10
если просто вертикальные отступы между элементами, тогда margin - это его прямое назначение
0
8 / 0 / 2
Регистрация: 11.06.2016
Сообщений: 261
24.06.2016, 00:11  [ТС] 11
да, но если к примеру жны еще отступы с лева(у всех разные) да и еще к примеру топ и ботом маргины применить к <a> неполучается...
0
Модератор
Эксперт JSЭксперт HTML/CSS
3390 / 2416 / 1439
Регистрация: 12.07.2015
Сообщений: 6,244
Записей в блоге: 4
24.06.2016, 00:20 12
Лучший ответ Сообщение было отмечено Fedor92 как решение

Решение

Все получается Каждому элементу назначается свой класс и задаются отступы. Если надо ссылке дать вертикальные отступы, то надо превратить ее в блочно-строчный или в блочный элемент:
HTML5
1
2
3
4
5
6
7
8
<style>
.qwerty{
  display:inline-block; 
  /*или display:block*/
  margin:20px 30px 40px 20px;    
}
</style>
<a href="#" class="qwerty">Cсылка</a>
1
8 / 0 / 2
Регистрация: 11.06.2016
Сообщений: 261
24.06.2016, 00:24  [ТС] 13
угу), спасибо. Учим дальше

Добавлено через 52 секунды
тоесть правильней изменить display чем позиционировать ссылку через relative скажем?
0
Модератор
Эксперт JSЭксперт HTML/CSS
3390 / 2416 / 1439
Регистрация: 12.07.2015
Сообщений: 6,244
Записей в блоге: 4
24.06.2016, 00:26 14
Да, тут позиционирование не надо. А в ланном случае, лучше обернуть ссылки и span дивом и ему задать вертикальный отступ
0
8 / 0 / 2
Регистрация: 11.06.2016
Сообщений: 261
24.06.2016, 00:35  [ТС] 15
а почему лучше оборачивать в див?
извиняюсь за дотошность..)

Добавлено через 30 секунд
лишний код вроде тогда как получится
0
Модератор
Эксперт JSЭксперт HTML/CSS
3390 / 2416 / 1439
Регистрация: 12.07.2015
Сообщений: 6,244
Записей в блоге: 4
24.06.2016, 00:38 16
Лишний код получится, если обернуть каждую ссылку блоком В данном случае это надо для того, чтобы задать отступ одновременно всем элементам, а не каждому в отдельности, что будет совсем не хорошо.
И тогда ссылки можно оставить строчными.
0
8 / 0 / 2
Регистрация: 11.06.2016
Сообщений: 261
24.06.2016, 13:26  [ТС] 17
допетрал. спс!

Добавлено через 12 часов 47 минут
А если к примеру мне нужно спозиционировать ссылку и именно спозиционировать через top/left/right, что будет правельней, задать relative и к примеру минусовый отступ с верху(пере ссылкой расположен блочный елемент), или absolute и положительный отступ сверху.

И есть каккая нибудь общая схема/правило которым в таким случаях руководствувотся, будет ли рошибка/или плохой тон если сделать как то иначе?
Хочу на этапе изучения выработать общие правила для себя, чтоб потом от них работать.
0
19 / 18 / 5
Регистрация: 04.10.2012
Сообщений: 219
24.06.2016, 13:40 18
Я смотрю по верстке это карточка, все зависит от конкретного случая и желаемого результата. Если сложная карта, тогда обертку в релатив, внутренние элементы в абсолют и позиционируем. В Вашем случае, можно в релатив обертку , можно и без, зависит от общей верстки. Этому блоку задал бы padding, чтоб внутренние элементы отступили, выровнял бы их по центру, а по горизонтали марджинами.
0
8 / 0 / 2
Регистрация: 11.06.2016
Сообщений: 261
24.06.2016, 14:13  [ТС] 19
Согласен.
А есть какие нибудб общие правила для современной верстки, каккая она должна быть?

Добавлено через 1 минуту
нужно что то типа чек листа) чтоб я мог всегда туда глянуть, особенно на начальном этапе изучения.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
24.06.2016, 14:13

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Позиционирование элемента
Добрый день Просьба подсказать, в чём ошибка моего кода? Два нижних &lt;div&gt; элемента никак не...

Фиксированное позиционирование элемента
Вобщем наро есть таблица три строки и 2 столбца. В нижней и верхней строке ячейки обьединены...

Правильное позиционирование элемента
Здравствуйте, уважаемые форумчане. Не могу разобраться как реализовать позиционирование. Прошу...

Позиционирование элемента рядом
Допустим, у меня есть текст. &quot;читать далее&quot; и рядом с ним стрелочка &quot;&gt;&quot; как грамотно все это...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
19
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.