jquery - DIV 的 jQuery-UI 的 CSS

Question

我如何调整 jQuery-ui.css 以适应 DIV 之间的间距？我正在使用 jQuery 2.1.0 以及“平滑度”用户界面。但出于某种原因，我无法很好地掌握更改那里的 CSS。正如您在下面的示例中看到的，我已经提供了我的文本框几乎彼此重叠我只是想在它们之间多一点间距或填充..我尝试使用 <br>这最终会导致间距太大。任何帮助将不胜感激。

http://jsfiddle.net/acw7z1ob/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="clearfix">
  <label for="vin">&nbsp;&nbsp;&nbsp;Vehicle Identification Number:</label>
  <input type="text" name="vin" id="vin" validateat="onSubmit" validate="noblanks" size="30" maxlength="30" required="yes" message="Please enter vehicle identification number.">&nbsp;&nbsp;<span id="result"></span>
</div>
<div class="clearfix">
  <select name="month1" id="month1" size="1">
    <option value="">Choose a Month</option>
    <option value="0">January</option>
    <option value="1">February</option>
    <option value="2">March</option>
    <option value="3">April</option>
    <option value="4">May</option>
    <option value="5">June</option>
    <option value="6">July</option>
    <option value="7">August</option>
    <option value="8">September</option>
    <option value="9">October</option>
    <option value="10">November</option>
    <option value="11">December</option>
  </select>
  &nbsp;&nbsp;&nbsp;
  <select name="month2" id="month2" size="1">
    <option value="">Choose an Option</option>
    <option value="2">2</option>
    <option value="14">14</option>
  </select>
  &nbsp;&nbsp;&nbsp;
  <select name="month3" id="month3" size="1">
    <option value="">Choose an Option</option>
    <option value="3">3</option>
    <option value="15">15</option>
  </select>
</div>
<div class="clearfix">

  <label for="ew">Empty Weight:</label>
  <input type="text" name="ew" id="ew" validateat="onSubmit" validate="noblanks" required="yes" message="Please enter empty weight.">

  <label id="gvwLabel">&nbsp;&nbsp;&nbsp;Gross Vehicle Weight:*</label>
  <input type="text" name="gvw" id="gvw" onfocus="this.select()">

Answer 1

您可以使用 margin 作为您的文本输入，例如:

input[type='text'] {
  margin: 10px;
}

<div class="clearfix">
  <label for="vin">&nbsp;&nbsp;&nbsp;Vehicle Identification Number:</label>
  <input type="text" name="vin" id="vin" validateat="onSubmit" validate="noblanks" size="30" maxlength="30" required="yes" message="Please enter vehicle identification number.">&nbsp;&nbsp;<span id="result"></span>
</div>
<div class="clearfix">
  <select name="month1" id="month1" size="1">
    <option value="">Choose a Month</option>
    <option value="0">January</option>
    <option value="1">February</option>
    <option value="2">March</option>
    <option value="3">April</option>
    <option value="4">May</option>
    <option value="5">June</option>
    <option value="6">July</option>
    <option value="7">August</option>
    <option value="8">September</option>
    <option value="9">October</option>
    <option value="10">November</option>
    <option value="11">December</option>
  </select>
  &nbsp;&nbsp;&nbsp;
  <select name="month2" id="month2" size="1">
    <option value="">Choose an Option</option>
    <option value="2">2</option>
    <option value="14">14</option>
  </select>
  &nbsp;&nbsp;&nbsp;
  <select name="month3" id="month3" size="1">
    <option value="">Choose an Option</option>
    <option value="3">3</option>
    <option value="15">15</option>
  </select>
</div>
<div class="clearfix">

  <label for="ew">Empty Weight:</label>
  <input type="text" name="ew" id="ew" validateat="onSubmit" validate="noblanks" required="yes" message="Please enter empty weight.">

  <label id="gvwLabel">&nbsp;&nbsp;&nbsp;Gross Vehicle Weight:*</label>
  <input type="text" name="gvw" id="gvw" onfocus="this.select()">

或者您可以在类容器 clearfix 中添加边距:

.clearfix {
  margin: 10px;
}

<div class="clearfix">
  <label for="vin">&nbsp;&nbsp;&nbsp;Vehicle Identification Number:</label>
  <input type="text" name="vin" id="vin" validateat="onSubmit" validate="noblanks" size="30" maxlength="30" required="yes" message="Please enter vehicle identification number.">&nbsp;&nbsp;<span id="result"></span>
</div>
<div class="clearfix">
  <select name="month1" id="month1" size="1">
    <option value="">Choose a Month</option>
    <option value="0">January</option>
    <option value="1">February</option>
    <option value="2">March</option>
    <option value="3">April</option>
    <option value="4">May</option>
    <option value="5">June</option>
    <option value="6">July</option>
    <option value="7">August</option>
    <option value="8">September</option>
    <option value="9">October</option>
    <option value="10">November</option>
    <option value="11">December</option>
  </select>
  &nbsp;&nbsp;&nbsp;
  <select name="month2" id="month2" size="1">
    <option value="">Choose an Option</option>
    <option value="2">2</option>
    <option value="14">14</option>
  </select>
  &nbsp;&nbsp;&nbsp;
  <select name="month3" id="month3" size="1">
    <option value="">Choose an Option</option>
    <option value="3">3</option>
    <option value="15">15</option>
  </select>
</div>
<div class="clearfix">

  <label for="ew">Empty Weight:</label>
  <input type="text" name="ew" id="ew" validateat="onSubmit" validate="noblanks" required="yes" message="Please enter empty weight.">

  <label id="gvwLabel">&nbsp;&nbsp;&nbsp;Gross Vehicle Weight:*</label>
  <input type="text" name="gvw" id="gvw" onfocus="this.select()">