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