Вопросы Теги

Я не могу создавать край в соответствии с этикеткой <ul> в html, 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;
    }

    .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>, тогда у меня остается более маленький край и не идет. Мне хотелось бы видеть, если кто-то может помогать мне отчитываться мне, где недостаток, или как делать, чтобы это решать.

2
задан 26.01.2017, 05:06
3 ответа

Проблема - изображение, что ты распределяешь ему 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>
1
ответ дан 24.11.2019, 11:54

Сними float 

float: left;

float служит для того, чтобы разметить элементы в левую сторону или правую сторону, в твоем случае уже они располагаются одинокие, сначала один и потом они остальные.

introducir la descripción de la imagen aquí

1
ответ дан 24.11.2019, 11:54

Доказательство используя следующий 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;
}
0
ответ дан 24.11.2019, 11:54