По поводу селектора ul

Slovist · May 19, 2015

Я написал следующий код на html и css:

<html>

<head>

<title>Сайт о часах</title>

<style>

*{

padding:0;

margin:0;

}

ul{

height:60px;

width:700px;

margin-left:400px;

border:5px solid black;

}

li{

display:block;

list-style-type:none;

float:left;

margin-left:30px;

margin-top:15px;

}

a:link{

background-color:white;

color:black;

border:2px solid black;

padding:5px 10px 5px 10px;

display:inline-block;

}

a:visited{

background-color:white;

color:black;

border:2px solid black;

padding:5px 10px 5px 10px;

display:inline-block;

}

a:hover{

background-color:green;

color:white;

border:2px solid black;

padding:5px 10px 5px 10px;

display:inline-block;

}

a:active{

background-color:white;

color:black;

border:2px solid black;

padding:5px 10px 5px 10px;

display:inline-block;

}

</style>

</head>

<body>

<ul>

<li><a href="Casio.html">Часы Casio</a></li>

<li><a href="Burett.html">Часы Burett</a></li>

<li><a href="Orient.html">Часы Orient</a></li>

<li><a href="Fossil.html">Часы Fossil</a></li>

<li><a href="Rolex.html">Часы Rolex</a></li>

</ul>

</body>

</html>

Почему, когда я убираю в селекторе ul следующий код

height:60px;

width:700px;

то рамка вокруг меню исчезает и появляется одна прямая линия?И ведь по определению "Блочный элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки". То есть по этому определению высота блочного элемента UL определяется его содержимым, а в данном случае это содержимое - меню. То есть рамка должна огибать меню. Почему не так?

satantx · May 19, 2015

Потому что у тебя li имеет значение float: left;

Slovist · May 19, 2015

А почему из-за float:left рамка получается в форме линии? Ведь меню находится в блочном теге <ul>..

raptor-dm · May 19, 2015

ul это не селектор, а тег

Switch74 · May 19, 2015

ul это не селектор, а тег

в css селектор по тегу ul

Slovist · May 19, 2015

А почему из-за float:left рамка получается в форме линии? Ведь меню находится в блочном теге <ul>..

Switch74 · May 19, 2015

float заставляет объекты вести себя иначе, они перестают влиять на блочные объекты и их обтекают только строчные. В вашем случае, как вы и сказали, ul блочный элемент на высоту которого перестает влиять li имея свойство float

что бы этого не было можно использовать свойства overflow или clear, как именно ищите по ключевому слову clearfix

Sign In

По поводу селектора ul

Question

Slovist

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

satantx

Link to comment

Share on other sites

Slovist

Link to comment

Share on other sites

raptor-dm

Link to comment

Share on other sites

Switch74

Link to comment

Share on other sites

Slovist

Link to comment

Share on other sites

Switch74

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information