Breite Fieldset Ausgabe

Ich habe diesen HTML:Breite Fieldset Ausgabe

<body> 
<table align="center" width="50%"> 
     <tr> 
      <td> 
       <div id="iconpanel"> 
        <img alt="Logo" src="logo.gif"> 
        <hr 
         style="border: solid #d3d3d3 1px; height: 3px; background-color: #d3d3d3;"> 
        <form> 
         <fieldset id="fieldset"> 
          <legend>Personalia:</legend> 
          Name: <input type="text"><br> Email: <input 
           type="text"><br> Date of birth: <input type="text"> 
         </fieldset> 
        </form> 
       </div> 
      </td> 
     </tr> 
    </table> 
    <div id="main"></div> 
</body>

zusammen mit meinem css:

#iconpanel { 
    border-radius: 25px; 
    border: 2px solid #d3d3d3; 
    padding: 20px; 
    width: 100%; 
    height: 100%; 
    align: center; 
} 

#fieldset { 
    border-radius: 25px; 
    border: 2px solid #d3d3d3; 
    padding: 20px; 
    width: 100%; 
    height: 100%; 
    align: center; 
}

i erhalten diese Ausgabe:

wie Sie das sehen Breite meines fieldset ist länger als das übergeordnete Panel ...

Das sind meine ersten Schritte mit Css. Vielleicht kannst du mir helfen, das Problem zu finden.

Vielen Dank

Stefan

Quelle

2016-03-19 Stefan Beike

box-sizing: border-box;-#fieldset hinzufügen zu bekommen, was Sie wollen, weil jetzt die Breite des Elements 100% + 20px von padding auf jeder Seite sein wird.

Mit box-sizing: border-box; aktiviert, wird das CSS versuchen, die Polsterung innerhalb die eingestellte Breite zu implementieren, so ist die Breite 20px +? = 100%;

Grenzkasten Die Breite und Höhe Eigenschaften umfassen die Polsterung und Grenze, aber nicht den Rand . Dies ist das Box-Modell, das von Internet Explorer verwendet wird, wenn das Dokument im Quirks-Modus ist. Beachten Sie, dass die Füllung und der Rand innerhalb der Box, z. B. sind. .box {Breite: 350px; border: 10px solid black;} führt zu einer Box im Browser gerendert mit der Breite: 350px. Der Inhalt Box kann nicht negativ sein und ist auf 0 gesetzt, was es unmöglich macht, border-box zu verwenden, um das Element verschwinden zu lassen.

Lesen Sie mehr über box-sizing unter Mozilla Developer Network.

Quelle

2016-03-19 18:19:55 Roy

verrücktes Zeug !!! Funktioniert perfekt. Vielen Dank... –

Antwort

Verwandte Themen