I can not create an edge according to the ul tag in html, css

Question

I can not create an edge according to the ul tag in html, css

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

2

I have the following problem that I think is best explained with the code. The same is:

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>

My drawback is that the last <li> never fits the size of <ul> , then I have a smaller edge and it does not look good. I would like to see if someone can help me to realize where the problem is or how to solve it.

html css

asked by allnuck 21.12.2016 в 20:07

source

3 answers

Convert string to System.IO.Ports.Parity C # Static variable that can not be assigned?

score 1 · Answer 1

The problem is the image, that you are assigning a height of 120px and ul.header if you are assigning a border, then CSS interprets that there must be a li (where the image is) with a border of 120px in height , and the others li puts them as such, I do not know if I explain ...

You should simply add a height: 120px in the class ul.header li It would look like this:

<!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>

score 1 · Answer 2

1

Remove the float

float: left;

The float serves to accommodate elements left or right, in your case they are already accommodated alone, first one and then the others.

answered by 21.12.2016 в 20:28

score 0 · Answer 3

Try using the following css, this way it shows me all the edges of <li> of the same size:

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;
}