почему все пошло с дисплеем: блок? - PullRequest
Новая
       1

почему все пошло с дисплеем: блок?

0 голосов
/ 24 июня 2009

Это нормально: 

<html>
<head>
<title>tabs</title>
<style>
li { 
    display:inline;
    margin:0 90px;
    background:#777777 none repeat scroll 0 0;
}

li a {
    padding:6px 12px;
    color:#FFFFFF;
    text-decoration:none;
    font-weight:bold;
}
</style>

</head>
<body>
<div id="tabs">
    <div class="nav">
        <ul>
            <li><a href="test">test</a></li>
            <li><a href="test">test</a></li>
            <li><a href="test">test</a></li>
            <li><a href="test">test</a></li>
            <li><a href="test">test</a></li>
        </ul>
    </div>
</div>
</body>
</html>

Но если я изменю li a на display:block, все исчезнет. Почему? 

<html>
<head>
<title>tabs</title>
<style>
li { 
    display:inline;
    margin:0 90px;
    background:#777777 none repeat scroll 0 0;
}

li a {
    padding:6px 12px;
    color:#FFFFFF;
    text-decoration:none;
    font-weight:bold;
    display:block;
}
</style>

</head>
<body>
<div id="tabs">
    <div class="nav">
        <ul>
            <li><a href="test">test</a></li>
            <li><a href="test">test</a></li>
            <li><a href="test">test</a></li>
            <li><a href="test">test</a></li>
            <li><a href="test">test</a></li>
        </ul>
    </div>
</div>
</body>
</html>

РЕДАКТИРОВАТЬ : Кажется, что отступ: 6px 12px здесь вообще не работает. Но перемещение его в li приведет к тому, что заполнение не будет даже (в IE), как?

Ответы [ 4 ]

2 голосов
/ 25 июня 2009

Ваш код исчезает, потому что у вас есть блочные элементы (с разрывами строк и высотой и шириной) внутри встроенного элемента (без разрыва строк и без высоты или ширины).

Может помочь просмотр страницы w3 на модели визуального форматирования .

Элементы уровня блока визуально форматируются как блоки - они имеют разрыв строки до и после них.

Встроенные элементы не образуют новые блоки контента. Они находятся в потоке элемента уровня родительского блока.

Когда у вас есть элемент block во встроенном элементе, создаются анонимные блоки (см. Раздел 9.2.1.1 на странице, на которую я ссылался), и каждый браузер обрабатывает эту ситуацию по-своему.

0 голосов
/ 24 июня 2009

Измените свой цвет в определении li a. E.g.:

li a {
    padding:6px 12px;
    color:red;
    text-decoration:none;
    font-weight:bold;
    display:block;
}
0 голосов
/ 24 июня 2009 
li { 

    margin:0 90px;
    background:#777777 none repeat scroll 0 0;
}


li a {
display:block;    
padding:6px 12px;
    color:#FFFFFF;
    text-decoration:none;
    font-weight:bold;
}
0 голосов
/ 24 июня 2009

Попробуйте плавать

влево вместо отображения в строке.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...