Jump to content
  • 0

Лишний отступ в диве


StormMan
 Share

Question

Друзья, доброго времени суток!

У меня проблема. Делаю вёрстку верхнего меню дивами и списком, и непонятно откуда в диве перед списком взялся отступ, видимый в Опере и ФФ, но не существующий в IE7.

Суть такая - в сумме ширина вложенных в див элементов списка, заданная конкретными значениями, меньше самого дива (его ширина тоже задана абсолютным значением), но тем не менее див переполняется и крайний левый элемент списка вылетает за пределы дива. Такое ощущение, что внутри дива находится отступ, либо откуда-то берутся поля у элементов списка, ходя в коде я их не задавал. Подскажите, в чём может быть дело?

Картинка

<html>

<head>

.....

<style type="text/css">

.div1 {

background: #C1D2b3;

width: 470px;

height:30px;

float:left;

}

.list {

text-align: left;

line-height: 25px; margin:0px;

list-style: none;

}

ul.list li {

display: inline;

height: 25px;

float: right;

padding:0;

margin:0;

text-align:left;

font-weight: bold;

font-size:10pt;

display:block;

color: #1F2547;

}

</style>

</head>

<body>

<div class='div1'>

<ul class="list">

<li style='width:283px; text-align:right; padding-right:40px;'>Текст2</li>

<li style='width:73px; text-align:right; padding-right:40px;'>Текст1</li>

</ul>

</div>

</body>

</html>

Edited by StormMan
Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0

Суть проблемы в том, что элемент li внутри ul смещён относительно последнего примерно на 30пк вправо, в результате чего появляется совершенно ненужный отступ. Проблема актуальна для FF и Оперы, в ослике всё позиционируется нормально.

Код:

<div style='widht: 50; height: 20;'>

<ul style='widht: 50; height: 20; background-color:#F00;'>

<li style='widht: 50; height: 20; list-stile:none; background-color:#00F;'></li>

</ul>

</div>

А здесь иллюстрация: http://imageshost.ru/links/9685b3f4ddc5235b009e231e022951ba

То бишь проблема оказалась в другом - отступ не внутри дива, а внутри тэга ul. Как лечить?

Edited by StormMan
Link to comment
Share on other sites

  • 0

К стилю ul надо добавить padding и margin с нулевыми значениями. Разные браузеры по разному отступы задают, поэтому вначале требуется их обнулить, а потом уже регулировать.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy