Question

如何根据DIV之间的间距调整jQuery-ui.css？我正在使用jQuery 2.1.0以及＃34; smoothness＆＃34; UI。但由于某些原因，我无法很好地掌握改变CSS的方法。正如你在下面的例子中所看到的，我提供的文本框正好在彼此的顶部，我只是想在它们之间多一点间距或填充..我尝试使用<br>并且最终结束了间隔太大了。任何帮助将不胜感激。

http://jsfiddle.net/acw7z1ob/

＆＃13;

<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()">

＆＃13;

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()">

DIV的jQuery-UI的CSS

1 个答案: