Eltern div mit Rand und mit Auto und Kind mit 100% füllen nicht die volle Breite

Question

Was ich tun möchte, ist ein Menü zu erstellen, das alle Breite aber einige Marge links und rechts füllt. Diese ist die Struktur:

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

Und das ist die 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; 
} 

Die Struktur wäre die volle div und Margen links und rechts, aber die div sich mit Grenzen hat, den anderen zu füllen Teil der Seite

Hier ist das Beispiel: jsfiddle

Answer 1

allererst float:left; vonentfernen, .content und .element Elemente. Es wird alles 100% breit machen. Eigentlich brauchst du überhaupt kein Styling für .element, zumindest für das was du verlangst.

Sie haben bereits einige Marge links und rechts von .content, so dass Sie hier nichts ändern müssen.

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

(I entfernt auch width: auto; von .content Element, da es nicht nötig ist)