У меня есть следующий недостаток, в который я верю, он объясняется лучше с кодом. Тот же самый:
ul.header
{
width: 100%;
overflow: hidden;
background: #F4F4F4;
border: 1px solid #7C7C7C;
list-style: none;
margin: 0;
padding: 0;
}
ul.header li
{
float: left;
border-left: 1px solid #FFF;
border-right: 1px solid #7C7C7C;
color: #333;
display: inline-block;
padding: .3em;
text-decoration: none;
}
.mi-imagen
{
height: 120px;
width: 120px;
}
<body>
<ul class="header">
<li class="col-md-4">
<img src="imagen.jpg" class="mi-imagen">
li con imagen
</li>
<li class="col-md-4">
un li
</li>
<li class="col-md-4">
otro li
</li>
</ul>
</body>
Мой недостаток - что последний <li>
никогда он не приспосабливается к размеру <ul>
, тогда у меня остается более маленький край и не идет. Мне хотелось бы видеть, если кто-то может помогать мне отчитываться мне, где недостаток, или как делать, чтобы это решать.
Проблема - изображение, что ты распределяешь ему height 120px и в ul.header li ты распределяешь ему border, тогда CSS интерпретирует, что, должно быть, есть li (где - изображение) с border 120px height, и остальной li делает их такими, каков, не, если я объясняюсь...
Ты был бы должен добавлять, Что просто один height:120px в классе ul.header li Остался бы таким:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul.header
{
width: 100%;
overflow: hidden;
background: #F4F4F4;
border: 1px solid #7C7C7C;
list-style: none;
margin: 0;
padding: 0;
}
ul.header li
{
float: left;
border-left: 1px solid #FFF;
border-right: 1px solid #7C7C7C;
color: #333;
display: inline-block;
padding: .3em;
text-decoration: none;
height: 120px;
}
.mi-imagen
{
height: 120px;
width: 120px;
}
</style>
</head>
<body>
<ul class="header">
<li class="col-md-4">
<img src="imagen.jpg" class="mi-imagen">
li con imagen
</li>
<li class="col-md-4">
un li
</li>
<li class="col-md-4">
otro li
</li>
</ul>
</body>
</html>
Доказательство используя следующий css, таким образом показывает мне все края <li>
того же самого tamaГ±o:
ul.header
{
width: 100%;
overflow: hidden;
background: #F4F4F4;
border: 1px solid #7C7C7C;
list-style: none;
margin: 0;
padding: 0;
display: inline-table;
}
ul.header li
{
/* float: left; */
border-left: 1px solid #FFF;
border-right: 1px solid #7C7C7C;
color: #333;
display: inline-block;
padding: .3em;
text-decoration: none;
height: 100%;
vertical-align: top;
}
.mi-imagen
{
height: 120px;
width: 120px;
}