HTML, Place divs nahe beieinander

Ich habe ein Problem in meinem HTML-Code. Ich habe "Titel", "Vorname" und "Nachname" und ich brauche eine Eingabebox, die von Benutzern ausgefüllt werden muss. Diese Eingabefelder sind in meinem Formulargenerator als Felder definiert (z. B. [en_title]). Wenn ich nun den HTML-Code aufschreibe, um die Ausgabe anzuzeigen, werden die Blöcke untereinander angeordnet. Ich möchte sie nahe beieinander platzieren, und wenn ich float in meinem div-Stil verwende, werden sie nahe beieinander platziert, ABER die Eingabefelder schrumpfen, während im ersten Fall die Eingabefelder nicht schrumpfen. Bitte geben Sie mir eine Lösung für dieses Problem, dass die Blöcke in der Nähe platziert und die Boxen nicht schrumpfen. DankeHTML, Place divs nahe beieinander

<div> 
    Title <br /> 
    [en_title] 
</div> 
<div> 
    Firstname <br /> 
    [en_fname] 
</div> 
<div> 
    Surname <br /> 
    [en_sname] 
</div>

Quelle

2017-06-29 shp

Wenn Sie nur 3 Elemente haben, verwenden Sie 'float: left; Breite: 33,333% '. Wenn es Paddings oder Grenzen gibt, fügen Sie 'box-sizing: border-box' hinzu. – Morpheus

feste Breiten sind wahrscheinlich das, was Sie brauchen. Wäre besser gewesen, wenn du dein vorhandenes CSS gezeigt hättest. – ADyson

So haben Sie 3 div, die Sie horizontal nebeneinander platzieren möchten. Die Breite des Div, das all diese div enthält, ist 100%. Also jedes div hat eine Breite von 100/3%. Es funktioniert als Bootstrap zum Beispiel.

Sie können das tun, wie dieser

Führen Sie das Snippet

.your-block { 
 
    float: left; 
 
    width: 33.33333%; 
 
}

<div class="your-block"> 
 
    <label for="title">Title </label> <br /> 
 
    <input id="title" type="text"/> 
 
</div> 
 
<div class="your-block"> 
 
    <label for="firstname">firstname </label> <br /> 
 
    <input id="firstname" type="text"/> 
 
</div> 
 
<div class="your-block"> 
 
    <label for="surname">surname </label> <br /> 
 
    <input id="surname" type="text"/> 
 
</div>

Quelle

2017-06-29 07:46:24 1ronmat

vielen Dank, es war so hilfreich. – shp

aber @shp, wenn Sie Padding Ihres div ändern, müssen Sie Breite reduzieren. Versuchen Sie, Tools wie Bootstrap zum Beispiel zu verwenden, die Ihnen leicht helfen können – 1ronmat

Sie Breite verwenden benötigen und position:absolute auch so verwenden, dass Sie Ihre Steuer überall bewegen können mit margin-left:10px oder margin-top:10px was auch immer in Ihrem Fall. Auch wäre es hilfreich, wenn Sie Ihren css-Code für das gleiche teilen.

Quelle

2017-06-29 07:49:03

Verwenden display:inline-block; statt float

div{ 
 
display:inline-block; 
 
}

<div> 
 
Title <br /> 
 
<input type="text"/> 
 
</div> 
 
<div> 
 
Firstname <br /> 
 
<input type="text"/> 
 
</div> 
 
<div> 
 
Surname <br /> 
 
<input type="text"/> 
 
</div>

Quelle

2017-06-29 07:49:10

Bessere Lösung: nicht Divitis für diesen Einsatz, Verwendung Etiketten und Eingabefelder:

HTML:

<form> 
    <label> Name <input type="text"> </label> 
    <label> Email <input type="email"> </label> 
</form>

CSS:

form{display: flex}

Auf diese Weise können semantische HTML haben und das gewünschte Aussehen zu erzielen. Ein guter Überblick darüber, was mit flexbox gemacht werden kann, ist bei css-tricks: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Quelle

2017-06-29 08:00:29 cloned

HTML, Place divs nahe beieinander

Antwort

Verwandte Themen