Danny Chang Danny Chang - 1 month ago 6
CSS Question

The red box doesn't show up, instead, it's a line

As you can see the picture the red box has become a line, I set the height with 300px, but it has no effect the picture at all. I have provided the HTML and CSS. I have set the height with 200px in

div
ul
of the CSS page.

I am not allowed to add picture, so I can't show the picture.

HTML PART:

<!DOCTYPE html>
<html>
<head>
<title>multiple box</title>
<link rel="stylesheet" type="text/css" href="test22.css">
</head>
<body>
<div class="div1">
<ul>
<li><img src="chicken.jpg"/></li>
<li><img src="chicken.jpg"/></li>
<li><img src="chicken.jpg"/></li>
</ul>
</div>
</body>
</html>


CSS PART:

body{
margin: 0px;
padding: 0px;
}

.div1{
width: 800px;
height: 400px;
border: 1px solid #b4b4b4;
margin-left: 100px;
margin-top: 20px;
}

.div1 ul{
width: 350px;
height: 200px;
border-top: 1px solid red;
margin-left: 100px;
margin-top: 20px;
list-style-type: none;
}

.div1 li {
width: 50px;
height: 52px;
border: 1px solid blue;
float: left;
}

.div1 img {
width: 40px;
}

Answer

you are using border-top instead of border. so just the top edge of the box is drawn

body{
    margin: 0px;
    padding: 0px;
}

.div1{
    width: 800px;
    height: 400px;
    border: 1px solid #b4b4b4;
    margin-left: 100px;
    margin-top: 20px;
}

.div1 ul{
    width: 350px;
    height: 200px;
    border: 1px solid red;
    margin-left: 100px;
    margin-top: 20px;
    list-style-type: none;
}

.div1 li {
    width: 50px;
    height: 52px;
    border: 1px solid blue;
    float: left; 
}

.div1 img {
    width: 40px;
}
<!DOCTYPE html>
<html>
<head>
    <title>multiple box</title>
    <link rel="stylesheet" type="text/css" href="test22.css">
</head>
<body>
    <div class="div1">
        <ul>
            <li><img src="chicken.jpg"/></li>
            <li><img src="chicken.jpg"/></li>
            <li><img src="chicken.jpg"/></li>
        </ul>
    </div>
</body>
</html>