Einzelnen Beitrag anzeigen
  #2 (permalink)  
Alt 05.01.2017, 16:41
MrMurphy MrMurphy ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Du machst dir selbst das HTML-Leben unnötig schwer indem du unterschiedliche Layoutmöglichkeiten zusammenhanglos mixt.

Eine Liste (ul-Element) ist nicht notwendig.

Wenn Elemente mit einer Breite von 100% (input) neben anderen Elementen (label) stehen sollen sind Probleme vorprogrammiert. Bei width sind Breiten von über 100% in der Regel unsinnig.

Ich würde den Quelltext im body-Bereich vereinfachen und das Layout auf Flexbox beschränken. Die Größenangaben und Abstände können natürlich noch angepasst werden.

Außerdem sollte gleich ein Responsive Design berücksichtigt werden.

Mein Vorschlag:

HTML-Code:
   <div id="emaske">
      <div>
         <label for="eins">eins</label>
         <input id="eins" name="eins" type="text">
      </div>
      <div>
         <label for="zwei">zwei</label>
         <input id="zwei" name="zwei" type="text">
      </div>
      <div>
         <label for="drei">drei</label>
         <input id="drei" name="drei" type="text">
      </div>
      <div>
         <label for="vier">vier</label>
         <input id="vier" name="vier" type="text">
      </div>
   </div>
und das CSS dazu

Code:
   /*#emaske*/
   @media all {
      #emaske {
         background-color: lightgreen;
         max-width: 1000px;
         padding: 1rem;
         margin: 1rem;
      }
      #emaske div:nth-last-child(1n+2) {
         margin: 0rem 0rem 1rem 0rem;
      }
      #emaske label {
         display: block;
         width: 100%;
      }
      #emaske input {
         display: block;
         width: 100%;
      }
   }
   @media only screen and (min-width: 400px) {
      #emaske div {
         display: flex;
      }
      #emaske label {
         text-align: right;
         padding: 0rem 0.5rem 0rem 0rem;
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: 3rem;
      }
      #emaske input {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(100% - 3.5rem - 0rem - 0px - 0rem);
      }
   }
   @media only screen and (min-width: 600px) {
      #emaske {
         display: flex;
         flex-wrap: wrap;
      }
      #emaske>div {
         padding: 0.5rem;
      }
      #emaske div:nth-last-child(1n+2) {
         margin: 0rem 0rem 0rem 0rem;
      }
      #emaske>div:nth-child(-1n+3) {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(50% - 1rem - 0px - 0rem);
      }
      #emaske>div:nth-child(4) {
         margin: 2rem 0rem 0rem 0rem;
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(100% - 1rem - 0px - 0rem);
      }
      #emaske>div:nth-child(1) {
         order: 1;
      }
      #emaske>div:nth-child(2) {
         order: 3;
      }
      #emaske>div:nth-child(3) {
         order: 2;
      }
      #emaske>div:nth-child(4) {
         order: 4;
      }
   }
Und noch ein temporärer Link zum direkten Ausprobieren:

http://boratb.bplaced.net/index03.html

Gruss

MrMurphy

Geändert von MrMurphy (05.01.2017 um 17:18 Uhr)
Mit Zitat antworten
Sponsored Links