CSS-在输入字段的左侧对齐标签

Question

我正在处理复杂的表单，这是大型项目的一部分，我至少需要应用基本样式。 这是我遇到的问题。 我对CSS不太满意，我只是没有设计师的开发人员:(我看过SO，并尝试了几种方法，但是没有一种方法可以满足我的需求。

我有主要的div容器。 其中包含三种类型的元素：

• 情况1.标签后跟输入字段
• 情况2.标签后跟选择
• 情况3。两个带有减号和加号的输入框（分别用于递增和递减字段）这是我到目前为止所做的。

HTML：

<div class="main-container">
  //Case 1
  <div>
  <label for="typeAttributes">Type: </label>
  <select id="typeAttributes" class="field"><option  
  value="2">Company</option>
  <option value="4">Site</option>
  </select>
</div>
<div>
 //Case 2
  <label for="centralOrganization">Central Organization: </label>
  <input id="centralOrganization" class="field ui-autocomplete-input" 
  autocomplete="off" role="textbox" aria-autocomplete="list" >
</div>
//Case 3
<div class="input-wrapper">
 <label for="AttributeIndexFrom"> FROM </label>
 <input type="text" class="field inc-dec-input" name="index-from" 
 id="AttributeIndexFrom" value="0">
 <div class="inc button">+</div>
 <div class="dec button">-</div>
</div>
<div class="input-wrapper">
 <label for="AttributeIndexTo"> TO</label>
 <input type="text" class="field inc-dec-input" name="index-from" 
 id="AttributeIndexTo" value="0">
 <div class="inc button">+</div>
 <div class="dec button">-</div>
</div>

和CSS：

.input-wrapper {
 display: inline-block;
 text-align: left;
 }

我可以介绍自己的CSS类。 我只需要简单的东西，但对我来说却非常复杂。 我需要标签位于输入框和选择框的左侧。 在最后一种情况下，我需要将这些输入框放在同一行中，并将其标签放在前面，并在后面加减号。

我尝试了许多在SO上发现同样问题的人的方法。 但是这些解决方案都没有给我任何结果。

Answer 1

如果您没有设计师，我建议您采用一个框架，例如Bootstrap。 检查此： http : //getbootstrap.com/components/#input-groups-basic

它易于使用，并返回良好的结果...

您可以输入以下内容供您输入：

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <br /> <pre> Case 1:</pre> <div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"> </div> <br /> <pre> Case 2:</pre> <div class="input-group"> <span class="input-group-addon" id="basic-addon1">Select</span> <select class="form-control" id="sel1"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> </div> 

对于案例3，使用jQuery：

 $(function() { var spinner1 = $( "#spinner1" ).spinner(); var spinner2 = $( "#spinner2" ).spinner(); }); 

 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <p> <label for="spinner1">From:</label> <input id="spinner1" name="value"> </p> <p> <label for="spinner2">To:</label> <input id="spinner2" name="value"> </p>