我想要做的是创建一个菜单,它填充所有宽度但左右边距。 这是结构:
<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
答案 0 :(得分:1)
首先从float:left;
,.parent
和.content
元素中移除.element
。它会使一切都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;
}
&#13;
<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>
&#13;
(我还从width: auto;
元素中删除了.content
,因为它不需要)