Werid интервал слева внутри DIV поможет! - PullRequest
Новая
       4

Werid интервал слева внутри DIV поможет!

0 голосов
/ 13 марта 2011

По какой-то причине слева от div есть пробел

вот картинка того, что я вижу http://tinypic.com/r/msc2h/7

CSS 

 div {margin:auto;}

    li{padding: 0px; margin: 0px; display: inline; float:left;}

    ul{height: 20px; text-align: left; vertical-align: center; margin: auto;}

HTML 

<div style="border: 1px solid white; width: 500px;">
    <ul>
    <li>Home&nbsp;</li>
    <li>Product&nbsp;&nbsp;</li>
    <li>Links&nbsp;&nbsp;</li>
    <li>Contact Us&nbsp;&nbsp;</li>
    <li>Abuot Us</li>
    </ul>
</div>

Ответы [ 3 ]

2 голосов
/ 13 марта 2011

Вы также должны иметь отступ / отступ в 0 для UL.У Ула есть отступы.

1 голос
/ 13 марта 2011

Это не из div, это из-за отступов / полей, которые ваш браузер устанавливает для вас, если вы не переопределите его.Попробуйте это: 

    div {
        margin: auto;
        border: 1px solid white;
        width: 500px;
    }

    li {
        padding: 0;
        margin: 0 5px;
        display: inline;
        float: left;
    }

    ul {
        height: 20px;
        text-align: left;
        vertical-align: center;
        padding: 0;
        margin: 0;
    }

Я заметил, что вы использовали &nbsp; для добавления пробелов между элементами списка, это просто грязно и избыточно, поэтому я добавил margin: 0 5px; для каждого элемента списка.

Итак, удалите все эти &nbsp; и перенесите свойства border и width в CSS, что я и сделал выше, поскольку это хорошая практика. 

    <div>
        <ul>
        <li>Home</li>
        <li>Product</li>
        <li>Links</li>
        <li>Contact Us</li>
        <li>About US</li>
        </ul>
    </div>

Чтобы узнать больше, почемуХорошая практика для разделения структуры (HTML) и представления (CSS) - смотреть эти великолепные видео от Google: HTML, CSS и Javascript с нуля .

0 голосов
/ 13 марта 2011

Это может быть то поле: auto на ul, которое в основном будет центрировать ul в div. С такого рода списком, который может вести себя неожиданно.

Используете ли вы инструменты разработчика, такие как Firebug или Chrome, встроенный в инструмент "Inspect element", для более детального изучения? Они будут выделять каждый отдельный элемент отдельно и сообщать вам, какие именно значения используются для margin / padding / everything. Это действительно может ускорить решение подобных проблем. Еще один простой способ увидеть, что происходит, - дать всем границу размером 1 пиксель другого цвета. Таким образом, вы можете лучше определить, находится ли проблема внутри или снаружи ul, или даже как-то на одном из li.

...