stackoom
  简体   繁体   中英

How can I make the fields aligned?

 原文  2016-07-18 14:31:23  7   3    html/ css/ semantic-ui

Question

How can I align the input fields Title and Text so that they are on the same row as the labels? I need the extra div because I'm making a form that need dynamic fields. My problem is that the input boxes appear on the next row no matter what I do. 

 <html> <head> <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" type="text/css"> <style> textarea { height: 600px !important width: 500 px !important } </style> </head> <body> <form method="post" action="http://127.0.0.1:8080/_ah/upload/ahFkZXZ-bW9udGFvcHJvamVjdHIiCxIVX19CbG9iVXBsb2FkU2Vzc2lvbl9fGICAgICAgLwLDA" name="formular" class="ui form formular" accept-charset="UTF-8" enctype="multipart/form-data"> <span class="ui two column grid"> <div class="row"> <div class="two wide column"> <div class="field"> <label>Category</label> </div> </div> <div class="column field"> <div class="inline field" id="type_container"> <input type="radio" name="type" value="s"> <label>A</label> <input type="radio" style="margin-left: 25px;" name="type" value="k"> <label>B</label> </div> </div> </div> <div style="display: block;" id="category_contents" class="maintext"> <div class="row"> <div class="two wide column"> <div class="field"> <label>Title</label> </div> </div> <div class="column field"> <input type="text" name="title" placeholder="Title"> </div> </div> <div class="row"> <div class="two wide column"> <div class="field"> <label>Text</label> </div> </div> <div class="column field"> <input type="text" name="data" placeholder="Test"> </div> </div> </div> </body> </html>

3 answers

solution1
 2 ACCPTED  2016-07-18 14:42:54

Use display: inline-block; on your div 

 <html> <head> <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" type="text/css"> <style> textarea { height: 600px !important width: 500 px !important } .inline {display: inline-block;} </style> </head> <body> <form method="post" action="http://127.0.0.1:8080/_ah/upload/ahFkZXZ-bW9udGFvcHJvamVjdHIiCxIVX19CbG9iVXBsb2FkU2Vzc2lvbl9fGICAgICAgLwLDA" name="formular" class="ui form formular" accept-charset="UTF-8" enctype="multipart/form-data"> <span class="ui two column grid"> <div class="row"> <div class="two wide column"> <div class="field"> <label>Category</label> </div> </div> <div class="column field"> <div class="inline field" id="type_container"> <input type="radio" name="type" value="s"> <label>A</label> <input type="radio" style="margin-left: 25px;" name="type" value="k"> <label>B</label> </div> </div> </div> <div style="display: block;" id="category_contents" class="maintext"> <div class="row"> <div class="two wide column inline"> <div class="field"> <label>Title</label> </div> </div> <div class="column field inline"> <input type="text" name="title" placeholder="Title"> </div> <div class="two wide column"> <div class="field"> <label>Text</label> </div> </div> <div class="column field"> <input type="text" name="data" placeholder="Test"> </div> </div> </div> </body> </html>

I used a class inline to show you on your first text input

solution2
 1  2016-07-18 14:48:16

added a class textrow to the 2 row s containing the input type="text" and use display:inline-block on them 

 <html> <head> <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" type="text/css"> <style> textarea { height: 600px !important width: 500 px !important } .textrow { display:inline-block; } </style> </head> <body> <form method="post" action="http://127.0.0.1:8080/_ah/upload/ahFkZXZ-bW9udGFvcHJvamVjdHIiCxIVX19CbG9iVXBsb2FkU2Vzc2lvbl9fGICAgICAgLwLDA" name="formular" class="ui form formular" accept-charset="UTF-8" enctype="multipart/form-data"> <span class="ui two column grid"> <div class="row"> <div class="two wide column"> <div class="field"> <label>Category</label> </div> </div> <div class="column field"> <div class="inline field" id="type_container"> <input type="radio" name="type" value="s"> <label>A</label> <input type="radio" style="margin-left: 25px;" name="type" value="k"> <label>B</label> </div> </div> </div> <div style="display: block;" id="category_contents" class="maintext"> <div class="row textrow"> <div class="two wide column"> <div class="field"> <label>Title</label> </div> </div> <div class="column field"> <input type="text" name="title" placeholder="Title"> </div> </div> <div class="row textrow"> <div class="two wide column"> <div class="field"> <label>Text</label> </div> </div> <div class="column field"> <input type="text" name="data" placeholder="Test"> </div> </div> </div> </body> </html>

solution3
 1  2016-07-18 14:54:57

Float:left could align them in same row, you could do that either on class .row or assign other class into it and assign float:left; 

<div class="row">

........

</div>  

Css 

.row{
   float:left;
   padding-right:5px;
 }   

(or)

<div class="row txt">

    ........

</div>  

Css 

.txt{
   float:left;
   padding-right:5px;
 }

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How can I make this header perfectly aligned? How can I modify a Bootstrap form so that some fields are aligned on the left side of the screen, while other fields are aligned on the right side? How can I make bullets be vertically aligned on a unordered list? How can i make the horizontal navigation menu center aligned how can i make the li inside the two div aligned How can I make sure 2 row elements are perfectly aligned? How can i make this button and Icon aligned? they are off How can I make editable fields with button? How can I have text aligned right, but the div aligned center? How can I make my span properly aligned as I toggle another element?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM