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