盒子大小的设置-慕课网

首页课程实战体系课手记专栏慕课教程

盒子大小的设置

来源：12-7 长胖长高点--宽度和高度

哈喽姑娘

2016-03-08 18:23

我想把盒子大小设置为刚好装下内容，将内边距设置为0，但为什么盒子大小没有变化

写回答关注

4回答

水文刀

2016-03-08 18:50:16

已采纳
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>宽度和高度</title>
</head>
<style type="text/css">
ul {
list-style: none;
padding: 0;
margin: 0;
/*块级元素默认宽度为父级元素的宽度100%，要想适应内容大小要么转换为内敛元素，要么转换为inline-block元素，而最方便的办法就是使用float: left;或者position: absolute;二选一即可转换为inline-block元素*/
float: left;
position: absolute;
}

li {
border-bottom: 1px dotted #ccc;
background-color: red;
padding: : 0;
}
</style>

<body>
<ul>
<li>别让不会说话害了你</li>
<li>二十七八岁就应该有的见识</li>
<li>别让不好意思害了你</li>
</ul>
</body>

</html>
1 0

哈喽姑娘

非常感谢！

2016-03-28 18:15:38

共 1 条回复 >
这个肉肉有点肉

2016-03-08 21:46:46

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>长度和高度</title>
<style type="text/css">
ul a{
border-bottom:1px dotted #ccc;
background-color:red;
padding:0px;
width:200px;
}

</style>

</head>
<body style="background:green">
<ul>

<li><a>别让不会说话害了你</a></li>
<li><a>二十七八岁就应该有的见识</a></li>
<li><a>别让不好意思害了你</a></li>
</ul>

</body>
</html>

0 0
AdminiS

2016-03-08 18:52:56

宽度默认占用父标签的100%
需要用width来控制

0 0
任成才

2016-03-08 18:39:06

ul标签是块状模块，默认大小是body大小，也就是窗口大小，并没有进行更改ul大小的操作

0 0