盒子的宽度与高度

源自：12-10 我想脚下踩条线 - 使用border为盒子添加边框（二）

盒子的宽度与高度

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>宽度和高度</title>

<style type="text/css">

li{

border-bottom:1px dotted red;

width:200px;height:30px;

}

</style>

</head>

<body>

<ul>

<li>别让不会说话害了你</li>

<li>二十七八岁就应该有的见识</li>

<li>别让不好意思害了你</li>

</ul>

</body>

</html>

我把bottom换成了left。为什么显示的样式成了左边练成一线。我以为会是左边自上向下的三条线

提问者：慕娘6347874 2017-12-15 10:50

个回答

queens_seven

2017-12-15 11:02:52

已采纳

连在一起是指？他们没有距离？如果是内联元素，本来就是挨着的，不过如果代码里你在两个内联元素用了回车换行或者空格来保持代码距离，那么实际的页面会有一点距离。相反，如果你代码紧挨着，就没有距离了。
而块级元素如果不浮动，那就一般都是各自一行，上下的边框线才有可能靠在一起。

1
慕娘6347874

2017-12-15 12:09:28

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>宽度和高度</title>
<style type="text/css">
li{
border-bottom:1px dotted red;
width:200px;height:30px;
}
</style>
</head>
<body>
<ul>
<li>别让不会说话害了你</li>
<li>二十七八岁就应该有的见识</li>
<li>别让不好意思害了你</li>
</ul>
</body>
</html>
我把bottom换成了left。为什么显示的样式成了左边练成一线。我以为会是左边自上向下的三条线

0
嫊悈

2017-12-15 10:59:19

style="border:1px solid #ccc;border-top:none;border-bottom:none;"

0