странный интервал границы в html / css - PullRequest
Новая
       32

странный интервал границы в html / css

2 голосов
/ 24 мая 2009

Я пытаюсь создать горизонтальное меню с толстой рамкой, которая отображается над элементом мыши. Однако по какой-то причине в правом конце панели в Firefox и Chrome есть небольшой разрыв. Странно, IE отображает это без пробела. Firebug не показывает никакой причины для этого разрыва.

Я пытался использовать простые div-ы, и все же он появляется. Я перевел его на один пример HTML, только с divs.

Может кто-нибудь объяснить это и сказать мне, как избавиться от этого пробела? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Weird border spacing</title>
    <style type="text/css">
    div.outer
    {
        border-top: dotted 1px lime;
        margin: 10px;
    }

    div.outer div
    {
        display: inline;
        margin: 0;
        padding: 0 12px;
        border-left: solid 1px silver;
        border-top: solid 3px red;
    }        
    </style>
</head>
<body>
    <div class="outer">
        <div>First</div>
        <div>Second</div>
        <div>Third</div>
    </div>
</body>
</html>

Ответы [ 6 ]

2 голосов
/ 24 мая 2009

Я пропустил внутренний div, который зафиксировал странное расстояние, и внешний div, который заставил внутренний div находиться внутри него Вы можете настроить стили в соответствии с вашими потребностями. 

div.outer{border-top: 1px dotted lime;margin: 10px;float:left;}
div.outer div
{
    float:left;
    margin: 0;
    padding: 0 12px;
    border-left: 1px solid silver;
    border-top: 3px solid red;
}

Вы также можете удалить новые строки между div, чтобы исправить только пробелы.

1 голос
/ 24 мая 2009

display:inline редко работает хорошо. Попробуйте вместо этого использовать float:left.

0 голосов
/ 24 мая 2009

Причина, по которой вы получаете пространство, заключается в том, что встроенные элементы интерпретируют пробелы как нечто, подлежащее визуализации. Это позволяет вам:

Hello World

и до сих пор есть 2 отдельных слова. Чтобы удалить пространство, вы должны ... ну, удалить пространство. Когда вы пытаетесь соединить элементы для макета, как уже упоминалось, предпочтительным вариантом является использование float: left.

0 голосов
/ 24 мая 2009

разрыв вызван пробелом / новой строкой между <div>. Чтобы это исправить, поместите все <div> в одну строку без пробелов между ними. Однако я бы порекомендовал переосмыслить CSS, возможно, используя список <ul>

0 голосов
/ 24 мая 2009

объявление display: inline-block для селектора div.outer div может быть тем, что вы хотите.

0 голосов
/ 24 мая 2009

Попробуйте добавить: 

body {
    margin: 0;
    padding: 0;
}

Браузеры имеют разные значения по умолчанию для этих свойств CSS.

...