带有保证金的父级div以及100%的自动和子级不会填满全宽

时间:2016-04-22 08:36:42

标签: html css width

我想要做的是创建一个菜单,它填充所有宽度但左右边距。 这是结构:

<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

1 个答案:

答案 0 :(得分:1)

首先从float:left;.parent.content元素中移除.element。它会使一切都100%宽。实际上,你根本不需要.element的样式,至少你要求的是什么。

.content左侧和右侧已有部分边距,因此您无需在此更改任何内容。

&#13;
&#13;
.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;
&#13;
&#13;

(我还从width: auto;元素中删除了.content,因为它不需要)