我想做的是创建一个菜单,该菜单填充所有宽度,但在左侧和右侧有一些边距。 这是结构:
<div class="parent">
<div class="content">
<div class="element">
<a><p>Text1</p></a>
</div>
<div class="element">
<a><p>Text2</p></a>
</div>
<div class="element">
<a><p>Text3</p></a>
</div>
<div class="element">
<a><p>Text4</p></a>
</div>
</div>
</div>
这是CSS:
.parent
{
width:100%;
float:left;
}
.content
{
width:auto;
margin:0 20px;
float:left;
border-top:1px solid;
border-left:1px solid;
border-right:1px solid;
}
.element
{
width:100%;
float:left
}
.element a
{
width:auto;
padding:10px;
border-bottom:1px solid;
text-align:center;
display:block;
}
结构将是完整的 div 和左右边距,但带有边框的 div 本身必须填充页面的其他部分
示例如下:jsfiddle
最佳答案
首先从 .parent
、.content
和 .element
元素中删除 float:left;
。它会让一切都变得 100% 宽。实际上,您根本不需要为 .element
设置样式,至少对于您要求的内容是这样。
.content
的左右两侧已经有一些 边距,因此无需在此处进行任何更改。
.content {
margin: 0 20px;
border-top: 1px solid;
border-left: 1px solid;
border-right: 1px solid;
}
.element a {
padding: 10px;
border-bottom: 1px solid;
text-align: center;
display: block;
}
<div class="parent">
<div class="content">
<div class="element">
<a>
<p>Text1</p>
</a>
</div>
<div class="element">
<a>
<p>Text2</p>
</a>
</div>
<div class="element">
<a>
<p>Text3</p>
</a>
</div>
<div class="element">
<a>
<p>Text4</p>
</a>
</div>
</div>
</div>
(我还从 .content
元素中删除了 width: auto;
,因为它不需要)
关于html - 带有 margin 和 auto 的父 div 和 100% 的子元素不填充全宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36788922/