Erstellen von Formularelementen in der gleichen Zeile

Question

Ich mache derzeit eine App und ich versuche, 3 Formularelement auszurichten (25/25/50) wer auch immer, es scheint, als ob es nicht glatt gegangen ist. Ich werde am Ende ein Bild anhängen, um zu zeigen, wie es gerade aussieht. Auch wenn es möglich ist, gibt es sowieso ich kann das 3 Form-Element haben einen Abstand zwischen ihnen, so dass es leichter zu lesen und zu interpretieren ist?

Between 
<div class="ui-grid-e"> 
    <div class=ui-block-a><input type="text" name="between1" id="between1" required /></div> 
    <div class=ui-block-b><input type="text" name="between2" id="between2" required /></div> 
    Comment 
    <div class=ui-block-c><input type="text" name="betweencomment" id="betweencomment" required /></div> 
</div> 

https://imgur.com/a/vlpbi/

Answer 1

einfach aktualisieren Sie Ihre Markup

.ui-grid-e { 
 
position: relative; 
 
width: 400px; 
 
} 
 

 
.ui-block-a, 
 
.ui-block-b, 
 
.ui-block-c { 
 
box-sizing: border-box; 
 
padding: 0 5px; 
 
} 
 

 
.ui-block-a{ 
 
padding-left: 0; 
 
} 
 

 
.title-c { 
 
padding-left: 5px; 
 
} 
 

 
.ui-block-title{ 
 
box-sizing: border-box; 
 
float: left; 
 
width: 50%; 
 
} 
 

 
.ui-block-a, 
 
.ui-block-b { 
 
float: left; 
 
width: 25%; 
 
} 
 

 
.ui-block-c{ 
 
float: left; 
 
width: 50%; 
 
} 
 

 
input { 
 
width: 100%; 
 
}

<div class="ui-grid-e"> 
 
        <div class="ui-block-title title-a-b">Between</div> 
 
        <div class="ui-block-title title-c">Comment</div> 
 
         <div class=ui-block-a><input type="text" name="between1" id="between1" required /></div> 
 
         <div class=ui-block-b><input type="text" name="between2" id="between2" required /></div> 
 
         
 
         <div class=ui-block-c><input type="text" name="betweencomment" id="betweencomment" required /></div> 
 
        </div>

Answer 2

Ich schlage vor, für HTML zu verwenden, wie folgt:

<form class="ui-grid-e"> 
     <input type="text" name="between1" id="between1" /> 
     <input type="text" name="between2" id="between2" /> 
     <input type="text" name="betweencomment" id="betweencomment"/> 
</form> 

und in Ihrem CSS:

.ui-grid-e{ 

display: inline; 

float: left; 


} 

Answer 3

Verwenden Sie einfach flex wie folgt aus:

.ui-grid-e { 
 
    display: flex; 
 
} 
 

 
.ui-block-a, 
 
.ui-block-c { 
 
    flex: 1; 
 
    margin: 0 5px; 
 
} 
 

 
.ui-block-a input { 
 
    width: 48%; 
 
} 
 

 
.ui-block-c input { 
 
    width: 100%; 
 
} 
 

 
div { 
 
    box-sizing: border-box; 
 
}

<div class="ui-grid-e"> 
 

 
    <div class=ui-block-a> 
 
    <div>Between</div> 
 
    <input type="text" name="between1" id="between1" required /> 
 
    <input type="text" name="between2" id="between2" required /></div> 
 
    <div class=ui-block-c> 
 
    <div>comment</div> 
 
    <input type="text" name="betweencomment" id="betweencomment" required /></div> 
 
</div>