HTML中的问题
请问我的这段代码中一种是按了回车的和一种是没有空白（没有按回车），为什么会有不同呢？<divid="head"><ahref=""><span>所有订单</span></...
请问我的这段代码中一种是按了回车的和一种是没有空白（没有按回车），为什么会有不同呢？
<div id="head">
<a href=""><span>所有订单</span></a>
<a href=""><span>待付款</span></a>
<a href=""><span>待发货</span></a>
<a href=""><span>待收货</span></a>
<a href=""><span>待评价</span></a>
</div>
<div id="head">
<a href=""><span>所有订单</span></a><a href=""><span>待付款</span></a><a href=""><span>待发货</span></a><a href=""><span>待收货</span></a><a href=""><span>待评价</span></a>
</div> 展开
<div id="head">
<a href=""><span>所有订单</span></a>
<a href=""><span>待付款</span></a>
<a href=""><span>待发货</span></a>
<a href=""><span>待收货</span></a>
<a href=""><span>待评价</span></a>
</div>
<div id="head">
<a href=""><span>所有订单</span></a><a href=""><span>待付款</span></a><a href=""><span>待发货</span></a><a href=""><span>待收货</span></a><a href=""><span>待评价</span></a>
</div> 展开
1个回答
展开全部
这是样式的问题, 按照html规范, 一般的无论插入多少个空格(包括换行), 都当作一个空白字符来处理. 所以连着写的和换行的视觉表现是不同的.为了突出对比, 我举例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<style>
.myNav {
margin-bottom: 10px;
}
.myNav a{
display: inline-block;
padding: 10px;
text-decoration: none;
background-color: #eee;
}
</style>
</head>
<body>
<h5>html代码换行了</h5>
<div class="myNav">
<a href=""><span>所有订单</span></a>
<a href=""><span>待付款</span></a>
<a href=""><span>待发货</span></a>
<a href=""><span>待收货</span></a>
<a href=""><span>待评价</span></a>
</div>
<h5>html代码没换行</h5>
<div class="myNav">
<a href=""><span>所有订单</span></a><a href=""><span>待付款</span></a><a href=""><span>待发货</span></a><a href=""><span>待收货</span></a><a href=""><span>待评价</span></a>
</div>
</body>
</html>
不过, 通常我们会进行换行, 这样代码更具可读性. 如果因为换行导致的样式不是自己想要的, 例如对于样式display: inlin-block的元素, 会出现一个间隙. 这时候需要通过自己来调整样式达到预期效果. 有如下方式消除间隙:
方式1: 通过设置父元素的字体. 这种方式只是为了更好的说明为什么有空隙, 通常不要按这个办法那样做. 此外不同浏览器表现略有差异.
.myNav {
margin-bottom: 10px;
font-size: 0; /* 将父元素字体大小设为0, 消除换行造成的间隙 */
}
.myNav a{
display: inline-block;
padding: 10px;
text-decoration: none;
background-color: #eee;
font-size:13px; /* 子元素重新设定字体大小 */
}方式2: 使用float. 此方法能够兼容老旧浏览器.
.myNav {
margin-bottom: 10px;
}
.myNav a{
display: block; /* 将子元素设为block */
float: left; /* 使用float */
padding: 10px;
text-decoration: none;
background-color: #eee;
}
/* 别忘了为父元素清除浮动 */
.myNav::after{
content:"";
display: block;
clear: both;
}方式3: 使用flex布局. 推荐做法, 但是老旧浏览器不兼容.
.myNav {
margin-bottom: 10px;
display: flex /* 使用flex */
}
.myNav a{
padding: 10px;
text-decoration: none;
background-color: #eee;
}以上是常见做法.另外要说的是, 大部分情况我们不需要消除这个间隙. 比如要子元素看起来是连续的, 可以设置父元素的背景等.
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
