Почему этот ul превышает размер своего div? - PullRequest
Новая
       28

Почему этот ul превышает размер своего div?

2 голосов
/ 17 июля 2010

Хотя li.textmenu имеет ширину: 140px, отступы: 5px и div.textmenu имеет ширину: 150px, один элемент списка, который я создал до сих пор, имеет большое левое поле и выходит за правый край элемента div.хорошими 30px.Может кто-нибудь объяснить, почему?

http://www.briligg.com/frailty.html

css: 

div.textmenu {
  background-color: #3b3b3b;
  float: left;
  width: 150px;
  margin: 30px 10px 0 30px;
}

li.textmenu {
  background-color: #4a4a4a;
  margin: 0;
  padding: 5px;
  border: none;
  width: 140px;
  list-style: none;
  text-align: right;
}

html: 

<div class="textmenu"> 
  <ul> 
    <li class="textmenu"><a class="pink" href="http://www.briligg.com/frailty.html#culture">Stress Causes Addiction</a></li> 
  </ul> 
</div>

Ответы [ 5 ]

3 голосов
/ 17 июля 2010

Вы добавили zip / uni reset в начало вашего css файла? 

* { margin:0; padding:0; }

(поместите его точно так же, как в самом верху CSS, чтобы переопределить поля / отступы по умолчанию для браузера).

Скорее всего, для ul задан отступ / отступ по умолчанию, так что это противодействие.

2 голосов
/ 17 июля 2010

Это как сказал смеридан.Для all html-элементов предусмотрены свойства стиля.

Я рекомендую использовать команду css от Eric Meyer для сброса: http://meyerweb.com/eric/tools/css/reset/

Вы можете включить ее вверхувашего документа.После этого вы можете больше контролировать желаемый стиль.

2 голосов
/ 17 июля 2010

У ul есть поля и отступы, установленные браузером.Вы можете удалить это:

div.textmenu ul {margin:0;padding:0;}

Только ширина влияет на ширину, но вы, вероятно, тоже захотите убрать поле.

2 голосов
/ 17 июля 2010

Убедитесь, что ul не имеет собственных отступов и полей, сбросив его с помощью padding:0;margin:0;

0 голосов
/ 16 ноября 2011

Убедитесь, что вы рассчитали точную ширину и высоту Ли, которую вы хотите зафиксировать внутри Div, убедившись, что в DIV достаточно места внутри него. 

div.textmenu {
    background-color: #3b3b3b;
    float: left;
    width: 150px;
    margin: 30px 10px 0 30px;
    }
    li.textmenu {
    background-color: #4a4a4a;
    margin: 0;
    padding: 5px;
    border: none;
    width: 140px;
    list-style: none;
    text-align: right;
    }

Поскольку вы сделали заполнение:5px, рассчитанная по 2xwidth + высота Ли, Li должна превышать 150px ширины блока Div.Вы можете исправить это, уменьшив пиксель отступа в LI.

...