如何讓字段對齊？

如何對齊輸入字段標題和文本，使它們與標籤位於同一行？我需要額外的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 
 
    } 
 
    </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>

來源

2016-07-18 Niklas Rosencrantz

Co你不用餐桌嗎？ –

@PClegg但最好不要使用表格進行佈局。我可以解決這個問題，也可以通過製作div網格而不是表格來垂直對齊。 –

使用display: inline-block;您的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>

我使用的類內聯向你展示你的第一個文字輸入

來源

2016-07-18 14:42:54

添加類textrow含有input type="text" 2個row S和使用display:inline-block他們

<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>

來源

2016-07-18 14:48:16

Float:left可以在同一行對齊它們，你能做到這一點無論是在.row類或分配其他類進入並分配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; 
}

來源

2016-07-18 14:54:57 frnt

如何讓字段對齊？

回答

相關問題