Wie können Etiketten inline mit Eingängen angezeigt werden, mit w3.css

-2

Mit W3.CSS, wie zeigen wir Etiketten inline mit Eingängen?Wie können Etiketten inline mit Eingängen angezeigt werden, mit w3.css

<link href="http://www.w3schools.com/lib/w3.css" rel="stylesheet" /> 
 

 
<form class="w3-container"> 
 
    <p> 
 
    <label>First Name</label> 
 
    <input class="w3-input w3-border" type="text"> 
 
    </p> 
 
    <p> 
 
    <label>Last Name</label> 
 
    <input class="w3-input w3-border" type="text"> 
 
    </p> 
 
    <p> 
 
    <label>Email</label> 
 
    <input class="w3-input w3-border" type="text"> 
 
    </p> 
 
</form>

Quelle

2016-10-26 Charles Okwuagwu

außer Kraft setzen Standard-CSS-Stylings mit Ihnen besitzen

Sie geben Stile in folgenden css finden

.w3-input { 
    padding: 8px; 
    display: block; 
    border: none; 
    border-bottom: 1px solid #808080; 
    width: 100%; 
}

Änderung display und width Eigenschaft

.w3-input { 
    display: inline-block; 
    width: auto; 
}

oder gewünschte Breite, die u brauchen ..

Quelle

2016-10-26 18:41:47 Manjunath

Man könnte wünschen Lösung von w3.css nutzen (das erfordert nicht w3-Eingang überschrieben):

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
 
<div class="w3-bar w3-light-grey w3-border"> 
 
    <a href="#" class="w3-bar-item w3-button w3-mobile">Home</a> 
 
    <a href="#" class="w3-bar-item w3-button w3-mobile">Link 1</a> 
 
    <a href="#" class="w3-bar-item w3-button w3-mobile">Link 2</a> 
 
    <input type="text" class="w3-bar-item w3-input w3-white w3-mobile" placeholder="Search.."> 
 
    <button class="w3-bar-item w3-button w3-green w3-mobile">Go</button> 
 
</div> 
 

 
<link href="http://www.w3schools.com/lib/w3.css" rel="stylesheet" /> 
 

 
<form class="w3-container"> 
 
    <p class="w3-bar"> 
 
    <label class="w3-bar-item">First Name</label> 
 
    <input class="w3-bar-item w3-input w3-border" type="text"> 
 
    </p> 
 
    <p class="w3-bar"> 
 
    <label class="w3-bar-item">Last Name</label> 
 
    <input class="w3-bar-item w3-input w3-border" type="text"> 
 
    </p> 
 
    <p class="w3-bar"> 
 
    <label class="w3-bar-item">Email</label> 
 
    <input class="w3-bar-item w3-input w3-border" type="text"> 
 
    </p> 
 
</form>

https://www.w3schools.com/w3css/w3css_navigation.asp
https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_navbar_input

Quelle

2017-06-11 06:56:14 Hekkaryk

aber in gener nicht angewendet wird al zu Etiketten gegen Textfelder auf Formularen. siehe das Beispiel in meiner Frage –

was ich brauche, ist eine Möglichkeit, Etiketten gegen Textfelder richtig auszurichten –

Ich stellte einige böse aussehende Beispiel für diesen Anwendungsfall ... noch würde ich w3-Tabelle oder w3.css Gitter verwenden Layout. Autoren von w3.css sollen Formulare so gestalten, wie sie in Ihrem Beispiel aussehen, und Sie werden vielleicht einige hackische Methoden verwenden, um zu bekommen, was Sie wollen. Manjunath Lösung könnte tatsächlich besser aussehen. – Hekkaryk

Wie können Etiketten inline mit Eingängen angezeigt werden, mit w3.css

Antwort

Verwandte Themen