Parent div with margin and with auto and child with 100% do not fill full width

Question

我想做的是创建一个菜单，它填充所有宽度，但在左右两侧留有一些空白。这是结构：

<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

Answer 1

首先从 .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;，因为它不需要）

Parent div with margin and with auto and child with 100% do not fill full width

Parent div with margin and with auto and child with 100% do not fill full width

html

css

width