家長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％不填充全寬

回答

相關問題