Radiotasten sind zu weit entfernt

Question

Ich mache gerade eine Website und ich erstelle ein Formular, das den Benutzer ermöglicht, ihren Namen, E-Mail, Geschlecht und Geburtsdatum einzugeben. Mein Problem ist, dass ich mit label for = "" der CSS zu erlauben, jeden Abschnitt zu haben, mit dem oben

<form> 
    <table> 
     <tr> 
      <td><label for="Email">Please enter e-mail:</label></td> 
      <td><input id="email" type="text" name="email" title="email address" align="right" size="40"/></td> 
     </tr> 
     <tr> 
      <td><label for="Name">Please enter your full name:</label></td> 
      <td><input id="name" type="text" name="name" title="name" align="right" size="40"/></td> 
     </tr> 
     <tr> 
      <td><label for="DOB">Please enter your date of birth</label></td> 
      <td><input id="DOB" type="date" name="DOB" title="DOB" align="right"/></td> 
     </tr> 
     <tr> 
      <td><label for="gender">Please select your gender</label></td> 
      <td><input id="male" type="radio" name="male" title="male"/>Male<td><input id="female" type="radio" name="female" title="female"/>Female</td> 
     </tr> 
     <tr> 
      <td> 
       <label for="submit"><input type ="submit" value="Submit"></label> 
      </td> 
     </tr> 
    </table> 
</form> 

Meine CSS ausrichten wird:

label { 
    margin-left:400px; 
} 

Aber meine Radio-Buttons sind im Moment zu weit auseinander und ich kann nicht scheinen, dass sie sich näher kommen. Die Radio-Buttons können

auf diesem Bild zu sehen Wenn das Bild nicht angezeigt Sie es hier sehen: http://www.howilearn2.com/student/NonStudentIndex.html

Answer 1

Sie Strom sind eine <table> mit dieser Formatierung zu handhaben, aber einer von Ihre Radioknöpfe befinden sich in der dritten Spalte (im Gegensatz zu den anderen Radioknöpfen).

Versuchen Sie, sie beide im selben <td> Element platzieren:

<td> 
    <input id="male" type="radio" name="male" title="male"/>Male 
    <input id="female" type="radio" name="female" title="female"/>Female 
</td> 

Sie können see an example of this here und unten gezeigt:

Answer 2

Sie platziert die Radio-Buttons in separaten td ‚s, die Platzierung weiblicher Knopf in der dritten Spalte, dh rechts von allen anderen Feldern. Sie können entweder mit colspans herumspielen oder einfach die beiden Radiobuttons in derselben Zelle platzieren.

Zwei etwas unabhängige Hinweise:

• Betrachten Sie Ihr Formularlayout mit div Elementen und CSS zu tun, anstelle von Tabellen.
• Betrachten Sie eine dritte Option, um more inclusive zu sein.

Answer 3

Ich sehe, Sie haben eine Antwort gewählt, aber ich möchte eine alternative Antwort anbieten. Es kann komplizierter sein, aber ich versichere Ihnen, dass es auf lange Sicht hilft:

Übersicht: Ich schlage vor, einen besseren separation von Inhalt und Design von CSS für das Layout anstelle des HTML verwenden.

Erläuterung: Mit heutigen Fokus auf responsiveness (das heißt, Umgang mit verschiedenen Bildschirmgrößen), Tabellen sind Probleme. Mobile Geräte sind jetzt ein großes Problem und Tabellen zwingen oft eine bestimmte Breite, was ein Problem auf den kleineren Bildschirmen dieser Geräte sein kann. Wenn Sie das Design ändern möchten, müssen Sie entweder Ihren HTML-Code ändern oder eine Reihe von tabellenspezifischen Dingen in CSS hinzufügen, um alle Standard-Tabellenformatierungen in allen Browsern zu überschreiben. Dies kann ein Problem sein, wenn der HTML-Code in einer Vorlage wiederverwendet wird.

Wir haben jetzt diese tollen Dinge namens Medienabfragen, die uns helfen, das Styling basierend auf der Bildschirmgröße dynamisch zu ändern.Wenn Sie einem "Mobile-First" -Ansatz folgen, beginnen Sie zuerst mit dem Entwurf für kleine Bildschirme und erweitern dann den Inhalt mithilfe von Medienabfragen auf größere Bildschirme. Wenn Sie die "Tabelle" im CSS definiert haben, können Sie sie leicht ändern. (Bsp: als eine vertikale Liste beginnen und über bestimmte Rasterweiten zu einer Tabelle ändern)

Beispiel Responsive Lösung *:

(Nach dem Ausführen des Code-Schnipsel, die Größe des Browser-Fensters um den Effekt zu sehen)

/* Mobile (notice you can make this something other than a table) */ 
 
.container { 
 
    box-sizing: border-box; 
 
    width: 100%; 
 
    margin: 0px auto; 
 
    padding: 0px 25px; 
 
} 
 
.input-group:first-child, .input-submit:first-child { 
 
    margin-top: 0px; 
 
} 
 
.input-group, .input-submit { 
 
    margin-top: 25px; 
 
} 
 
.input-submit { 
 
    display: inline-block; 
 
} 
 

 
/* Larger-than-mobile */ 
 
@media (min-width : 768px) { 
 
    .container { width: 758px; padding: 0px; } 
 
    .form { 
 
    display: table; 
 
    border-spacing: 0px; 
 
    border-collapse: collapse; 
 
    } 
 
    .input-group { 
 
    margin: 0px; 
 
    display: table-row; 
 
    } 
 
    .input-label, .input-wrapper { 
 
    display: table-cell; 
 
    vertical-align: bottom; 
 
    
 
    /* invisible border between "cells" to space them out */ 
 
    border: 15px solid transparent; 
 
    } 
 

 
    /* Remove outer borders (if you want, you can remove this) */ 
 
    .form .input-group:first-child > * { 
 
    border-top: 0; 
 
    } 
 
    .form .input-group:last-child > * { 
 
    border-bottom: 0; 
 
    } 
 
    .form .input-group > *:first-child { 
 
    border-left: 0; 
 
    } 
 
    .form .input-group > *:last-child { 
 
    border-right: 0; 
 
    } 
 
}

<div class="container"> 
 
    <form class="form"> 
 
    <div class="input-group"> 
 
     <label class="input-label" for="Email">Please enter e-mail:</label> 
 
     <div class="input-wrapper"> 
 
     <input id="email" type="text" name="email" title="email address" align="right" size="40" /> 
 
     </div> 
 
    </div> 
 
    <div class="input-group"> 
 
     <label class="input-label" for="Name">Please enter your full name:</label> 
 
     <div class="input-wrapper"> 
 
     <input id="name" type="text" name="name" title="name" align="right" size="40"/> 
 
     </div> 
 
    </div> 
 
    <div class="input-group"> 
 
     <label class="input-label" for="DOB">Please enter your date of birth:</label> 
 
     <div class="input-wrapper"> 
 
     <input id="DOB" type="date" name="DOB" title="DOB" align="right"/> 
 
     </div> 
 
    </div> 
 
    <div class="input-group"> 
 
     <label class="input-label" for="gender">Please select your gender:</label> 
 
     <div class="input-wrapper"> 
 
     <input id="male" type="radio" name="male" title="male"/>Male 
 
     <input id="female" type="radio" name="female" title="female"/>Female 
 
     </div> 
 
    </div> 
 
    <label class="input-submit" for="submit"><input type="submit" value="Submit"></label> 
 
    </form> 
 
</div>

* Klassennamen und solche sind stark auf bootstrap