Question

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

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

案例1.标签后跟输入字段
案例2.标签后跟选择
案例3.带有减号和加号的两个输入框（对于inc和dec字段）这是我到目前为止所做的。

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>

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

1 个答案:

对于案例3，使用jQuery：