Как сделать выравнивание полей?

Как я могу выровнять поля ввода Title и Text так, чтобы они находились в той же строке, что и метки? Мне нужен дополнительный 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 Но не лучше использовать таблицу для макета. Я мог бы решить эту проблему, также выравнивая ее по вертикали, создав сетку divs вместо таблицы. –

Использование 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 к 2 row с содержащими input type="text" и использовать 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

Как сделать выравнивание полей?

ответ

Смежные вопросы