Question

正如你可以看到红色框已成为一条线的图片，我将高度设置为300px，但它根本没有效果。我提供了HTML和CSS。我在CSS页面的div ul中设置了200px的高度。

我不允许添加图片，所以无法显示图片。

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 1

您使用的是border-top而不是border。所以只绘制框的上边缘

＆＃13;

const user = await User.findOne({ type: 'admin' }) // returns a promise
if (user) ctx.throw(400, 'Duplicate admin')

＆＃13;

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

＆＃13;

红色框不显示，而是一条线

1 个答案: