Anzeige inline oder float ohne zu brechen - ohne Medienabfragen zu verwenden

Wenn ich versuche, float links oder inline anzuzeigen, brechen die Dinge. Derzeit habe ich eine maximale Breite von 1000px für das Formular. Was ich mir erhofft habe, ist, dass der Vor- und Nachname automatisch nebeneinander schwebt, wenn er breit genug ist. Also vielleicht eine min-width für Eingaben Vor- und Nachname?Anzeige inline oder float ohne zu brechen - ohne Medienabfragen zu verwenden

Wichtiger Hinweis: Ich schrieb dies, um CSS-DRY-Code zu schreiben. Sie bemerken, wenn Sie die Schriftgröße ändern, ändert das gesamte Projekt Größe, also das ist mir wichtig. Außerdem mache ich nicht möchte Medienabfragen verwenden.

Ich bin mir bewusst, dass ich meinen Ansatz ändern muss, und ich bin auch dafür offen. Nicht so sehr auf der Suche nach einer genauen Code-Antwort.

form { 
 
    text-align: center; 
 
} 
 

 
form ul, form li, form input, form label { 
 
    box-sizing: border-box; 
 
    margin: 0; padding: 0; 
 
} 
 
form ul { 
 
    font-size: 100%; 
 
    border: 3px solid #000; 
 
    border-radius: .3em; 
 
    max-width: 1000px; 
 
    margin: 50px auto; 
 
    list-style: none; 
 
    overflow: hidden; 
 
} 
 

 
form li { 
 
    position: relative; 
 
    border-bottom: inherit; 
 
    border-bottom: 3px solid; 
 
} 
 

 
form label { 
 
    position: absolute; 
 
    border-bottom: 1px dotted; 
 
    border-bottom-color: inherit; 
 
    width: 100%; 
 
    padding: .3em .3em; 
 
    padding-bottom: .1em;; 
 
    top: 0; left: 0; 
 
    font-size: .6em; 
 
    text-transform: uppercase; 
 
} 
 

 
form input, form input:focus { 
 
    text-transform: capitalize; 
 
    text-align: inherit; 
 
    background: transparent; 
 
    border: none; 
 
    width: 100%; 
 
    font-size: 2em; 
 
    padding: .7em .1em; 
 
    padding-bottom: .2em;; 
 
} 
 

 
form input:focus { 
 
    background-color: rgba(255, 255, 0, .2); 
 
} 
 

 
form input[type="submit"] { 
 
    text-transform: uppercase; 
 
    padding-bottom: 1.8em; 
 
    font-size: .6em; 
 
    height: 1.5em; 
 
    background-color: #ddd; 
 
    
 
}

<form action=""> 
 
    <ul> 
 
     <li> 
 
      <input id="first-name" type="text" autofocus> 
 
      <label for="first-name">First Name</label> 
 
     </li> 
 
     <li> 
 
      <input id="last-name" type="text"> 
 
      <label for="last-name">Last Name</label> 
 
     </li> 
 
     <li> 
 
      <input id="username" type="text"> 
 
      <label for="username">Username</label> 
 
     </li> 
 
     <li> 
 
      <input type="submit" name="submit"> 
 
     </li> 
 
    </ul> 
 
    
 
</form>

Quelle

2016-04-21 Michael Bruce

beginnen mit gültigen HTML und dann zu debuggen. "ul" darf nur "li" Elemente als Kinder haben - Sie haben dort ein 'div' und ein' input'. –

Das sollte eigentlich sowieso nicht da sein ... es ist jetzt weg. –

Eine sehr einfache Lösung ist mit Flexbox. Setzen Sie das übergeordnete Element auf den Anzeigetyp 'flex'. Auch flex wrap: wrap // Auf diese Weise werden die Kinder wickeln, wenn nötig. Die Kinder werden zu flexiblen Objekten. Da ich möchte, dass sie gerade sind, setze ich beide auf flex grow: 1 Setze die Kinder auf flex-basis als 300px. // Das ist fast wie eine minimale Breite. Dies löst den Umbruch aus.

body { 
 
    padding: 50px; 
 
} 
 
.main { 
 
    background-color: #e9e9e9; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.main input { 
 
    background-color: #e9e9e9; 
 
} 
 
.one { 
 
    flex-grow: 1; 
 
    flex-basis: 300px 
 
} 
 

 
.two { 
 
    flex-grow: 1; 
 
    flex-basis: 300px; 
 
}

<head> 
 
    <link rel="stylesheet" href="inline.css"> 
 
</head> 
 
<body> 
 
    
 
    
 
    <form class="main"> 
 

 
     <input type="text" class="one"> 
 
     <input type="text" class="two"> 
 

 
    </form> 
 
    
 
    
 
</body>

Quelle

2016-04-21 17:59:32

.fl-name { 
    display: flex; 
    flex-direction: row; 
}

Quelle

2016-04-21 14:28:45 lopezi

können Sie versuchen, System Bootstrap-Raster

diese Art und Weise zu verwenden, u die Eingaben in die Spalten haben können

bootstrap grid system

Blick auf diese Geige : gri system sample

<div class='row'> 
<div class="col-xs-2">Hi</div> 
<div class="col-xs-2">Hi</div>

in Ihrem Fall col-xs-6 erhalten Sie 2 Spalten geben voller Breite

Quelle

2016-04-21 14:31:34

Nicht ganz sicher, ob dies ist, was Sie vorhaben, für, aber es scheint zu passen Ihre Kriterien.

form { 
 
    text-align: center; 
 
} 
 
form ul, 
 
form li, 
 
form input, 
 
form label { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
form ul { 
 
    font-size: 100%; 
 
    border: 3px solid #000; 
 
    border-radius: .3em; 
 
    max-width: 1000px; 
 
    margin: 50px auto; 
 
    list-style: none; 
 
    overflow: hidden; 
 
} 
 
form li { 
 
    position: relative; 
 
    border-bottom: inherit; 
 
    border-bottom: 3px solid; 
 
} 
 
form label { 
 
    position: absolute; 
 
    border-bottom: 1px dotted; 
 
    border-bottom-color: inherit; 
 
    width: 100%; 
 
    padding: .3em .3em; 
 
    padding-bottom: .1em; 
 
    ; 
 
    top: 0; 
 
    left: 0; 
 
    font-size: .6em; 
 
    text-transform: uppercase; 
 
} 
 
form input, 
 
form input:focus { 
 
    text-transform: capitalize; 
 
} 
 
form #fl-name { 
 
    display: inline-block; 
 
} 
 
form .floatMe { 
 
    float: left; 
 
} 
 
form .clearMe { 
 
    clear: right; 
 
}

<form action=""> 
 
    <ul> 
 
    <div class="fl-name"> 
 
     <li class="floatMe"> 
 
     <input id="first-name" type="text" autofocus> 
 
     <label for="first-name">First Name</label> 
 
     </li> 
 
     <li class="floatMe clearMe"> 
 
     <input id="last-name" type="text"> 
 
     <label for="last-name">Last Name</label> 
 
     </li> 
 
    </div> 
 
    <li> 
 
     <input id="username" type="text"> 
 
     <label for="username">Username</label> 
 
    </li> 
 
    <input type="submit" name="submit"> 
 
    </ul> 
 

 
</form>

Quelle

2016-04-21 14:32:13 scallahan1119

Ich appreaciate die Antwort, obwohl dies den Code zu brechen. Fllexbox war, was ich gesucht habe. Ich kannte den Namen einfach nicht :) –

@MichaelBruce Ich bin froh, dass du alles herausgefunden hast! – scallahan1119

ist Flexbox die modernste Lösung für dieses Problem. Denken Sie jedoch daran, die erforderlichen Präfixe für einige Browser hinzuzufügen. Wenn IE9 Unterstützung erforderlich ist, finden Sie in der Gleitkomma-Lösung unter:

HTML

<form action=""> 
    <ul> 
     <li class="split"> 
      <input id="first-name" type="text" autofocus> 
      <label for="first-name">First Name</label> 
     </li> 
     <li class="split"> 
      <input id="last-name" type="text"> 
      <label for="last-name">Last Name</label> 
     </li> 
     <li class="fill"> 
      <input id="username" type="text"> 
      <label for="username">Username</label> 
     </li> 
     <input type="submit" name="submit"> 
    </ul> 

</form>

CSS

form { 
    text-align: center; 
} 

form ul, form li, form input, form label { 
    box-sizing: border-box; 
    margin: 0; padding: 0; 
} 
form ul { 
    font-size: 100%; 
    border: 3px solid #000; 
    border-radius: .3em; 
    max-width: 1000px; 
    margin: 50px auto; 
    list-style: none; 
    overflow: hidden; 
} 

form li { 
    position: relative; 
    border-bottom: inherit; 
    border-bottom: 3px solid; 
} 

form label { 
    position: absolute; 
    border-bottom: 1px dotted; 
    border-bottom-color: inherit; 
    width: 100%; 
    padding: .3em .3em; 
    padding-bottom: .1em;; 
    top: 0; left: 0; 
    font-size: .6em; 
    text-transform: uppercase; 
} 

form input, form input:focus { 
    text-transform: capitalize; 
    text-align: inherit; 
    background: transparent; 
    border: none; 
    width: 100%; 
    font-size: 2em; 
    padding: .7em .1em; 
    padding-bottom: .2em;; 
} 

form input:focus { 
    background-color: rgba(255, 255, 0, .2); 
} 

form input[type="submit"] { 
    text-transform: uppercase; 
    padding-bottom: 1.8em; 
    font-size: .6em; 
    height: 1.5em; 
    background-color: #ddd; 

} 

@media only screen and (min-width: 768px) { 
    li { 
    clear: both; 
    } 

    li.split { 
    width: 50%; 
    float: left; 
    clear: none; 
    } 
}

https://jsfiddle.net/qefo9eLr/

Quelle

2016-04-21 14:36:10 Jason

Flexbox ist genau das, was ich gesucht habe. Ich wusste einfach nicht, wie es heißt. Ich werde eine Studie über Flexbox machen. Vielen Dank! –

Obwohl ich zu früh gesprochen habe, gibt es einen Weg, dies ohne Medienabfragen zu tun? Mit min Breite oder so? –

Wenn Sie Inline-Elemente verwenden, können Sie min-width (https://jsfiddle.net/qefo9eLr/3/) verwenden. Sie könnten jedoch Probleme mit mobilen Geräten haben, wenn die Mindestbreite die Bildschirmbreite überschreitet. Normalerweise würde ich mich nicht mit Medienabfragen beschäftigen. – Jason

Hier ist eine weitere Alternative unsere alten treuen Floats mit: https://jsfiddle.net/mvpu6s5o/3/

Der Hauptunterschied ist im Grunde hier:

form li { 
    width: 33.33%; 
    float: left; 
} 

form li:nth-child(3) { 
    float: right; 
} 

form li:last-child { 
    width: 100%; 
    clear: both; 
}

Ich verwendete eine Breite mit Prozentsatz, um es flüssig zu halten, so dass es auf verschiedene Bildschirmgrößen anpassen wird. Die li:nth-child(3) float den letzten Eingang nach rechts, so dass wir am Ende aufgrund der 33,33% Breite eine kleine Lücke loswerden können. form li:last-child wird verwendet, um beide Floats zum letzten Eingang zu löschen (da dies auch ein li ist).

Quelle

2016-04-21 14:57:53

Ich ändere nur die Semantik und Flexbox anwenden.Dies ist das Ergebnis:

*, *:before, *:after { 
 
    box-sizing: inherit; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    align-items: center; 
 
    /background-color: #EB6361; 
 
    display: flex; 
 
    height: 100vh; 
 
    justify-content: center; 
 
} 
 
form { 
 
    box-shadow: 0 0 0 8px rgba(204,204,204,.85); 
 
    border-radius: 5px; 
 
    width: 500px; 
 
} 
 
form header { 
 
    background-color: #1ABC9C; 
 
} 
 
form header p { 
 
    color: #FFF; 
 
    font-family: 'ubuntu'; 
 
    font-size: 15px; 
 
    padding: 15px 10px; 
 
    text-align: center; 
 
} 
 
form .body { 
 
    background-color: #EEE; 
 
    padding: 15px 20px; 
 
} 
 
form .body .block { 
 
    border: 2px solid #333; 
 
    border-radius: 4px; 
 
    overflow: hidden; 
 
} 
 
form .body .block:not(first-of-type) { 
 
    margin-top: 10px; 
 
} 
 
form .body .block:first-of-type > .group { 
 
    width: 98%; 
 
} 
 
form .body .block:first-of-type { 
 
    display: flex; 
 
} 
 
form .body .block .group { 
 
    display: flex; 
 
    flex-flow: column-reverse nowrap; 
 
    overflow: hidden; 
 
} 
 
form .body .block:first-of-type .group:first-of-type { 
 
    border-right: 2px solid #333; 
 
} 
 
form input { 
 
    background-color: transparent; 
 
    border: none; 
 
    color: #555; 
 
    font-size: 22pt; 
 
    padding: 6px 10px; 
 
    text-align: center; 
 
} 
 
form input:focus, form input:focus + label { 
 
    background-color: #F7F8E0; 
 
} 
 
form label { 
 
    border-bottom: 1px dotted #bbb; 
 
    color: #555; 
 
    font-family: 'ubuntu'; 
 
    font-size: 11px; 
 
    padding: 2px; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
} 
 
form footer { 
 
    overflow: hidden; 
 
} 
 
form footer button { 
 
    background-color: #F39C12; 
 
    color: #FFF; 
 
    cursor: pointer; 
 
    width: 100%; 
 
    border: none; 
 
    padding: 4px; 
 
}

<form action=""> 
 
    <header> 
 
    <p>Submit Query Form</p> 
 
    </header> 
 
    <section class="body"> 
 
    <div class="block"> 
 
     <div class="group"> 
 
     <input type="text" /> 
 
     <label for="">First Name</label> 
 
     </div> 
 
     <div class="group"> 
 
     <input type="text" /> 
 
     <label for="">Last Name</label> 
 
     </div> 
 
    </div> 
 
    <div class="block"> 
 
     <div class="group"> 
 
     <input type="text" /> 
 
     <label for="">Username</label> 
 
     </div> 
 
    </div> 
 
    </section> 
 
    <footer> 
 
    <button>Submit query</button> 
 
    </footer> 
 
</form>

Quelle

2016-04-21 15:17:12

Anzeige inline oder float ohne zu brechen - ohne Medienabfragen zu verwenden

Antwort

Verwandte Themen