Те же правила стиля применяются к Див и Ли тегов дает различные результаты

test.html:Те же правила стиля применяются к Див и Ли тегов дает различные результаты

div, li { 
 
    display: inline-block; 
 
    margin-left: 30px; 
 
}

<div>тест1</div> 
 

 
<ul> 
 
    <li>тест</li> 
 
</ul>

test.html Открытие дает такой результат, что, хотя сНу и Ли теги доля те же правила стиля, содержимое тега div, тем не менее, ближе к границе с левым экраном, чем теги li (по крайней мере, в Google Chrome 44, на рабочем столе). Почему это так и как оно «исцелено»?

источник

2015-08-09 olegzhermal

<ul> есть какой-то запас слева слева по умолчанию css. Вы можете reset ваш css, или просто положите на ваш <ul>margin: 0; и padding: 0;.

источник

2015-08-09 12:12:52 AleshaOleg

Элементы HTML имеют правила стиля, отличные от простого левого поля & Тип отображения (например, дополнение). Кроме того, элементы расположены относительно других элементов (если явно не задано иное).

Нет причин для вашего <div> & <li> посмотреть идентично.

источник

2015-08-09 12:14:04 Amit

Теперь вы получите тот же эффект на обоих:

div, li{ 
    display: inline-block; 
    margin-left: 30px; 
} 
ul { 
    margin:0; 
    padding:0; 
}

Вот скрипку: http://jsfiddle.net/nphzbfwd/1/

источник

2015-08-09 12:16:05

слишком много кода, не так ли? – AleshaOleg

Я обновил ваше предложение, спасибо! @AleshaOleg –

Проводка полный код в соответствии с @Alesha Олега ответа-

<!DOCTYPE html> 
 

 
<style> 
 
div, li 
 
{ 
 
    display: inline-block; 
 
    margin-left: 30px; 
 
} 
 
ul 
 
{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
</style> 
 

 
<div>ABCD</div> 
 

 
<ul> 
 
    <li>ABCD</li> 
 
</ul>

источник

2015-08-09 12:19:27 CrakC

Те же правила стиля применяются к Див и Ли тегов дает различные результаты

ответ

Смежные вопросы