家长div与保证金和汽车和儿童与100％不填充全宽

我想要做的是创建一个菜单，填充所有的宽度，但左右一些边距。这是结构：家长div与保证金和汽车和儿童与100％不填充全宽

<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本身带有边框具有填补其他页面

下面的部分是例如：jsfiddle

来源

2016-04-22 danibg

你可以给的图结构（我也是从.content元素不需要的话删除width: auto;）你期待 –

变化'宽度：100％;'并将边距移除到'.content' –

[auto]标签特定于C++ 11，并且不适用于她并且已被删除。请注意你如何标记你的问题。 –

首先从删除,.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; 
 
}

<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>

来源

2016-04-22 08:45:23

家长div与保证金和汽车和儿童与100％不填充全宽

回答

相关问题