Question

我想知道如何堆叠我的下拉菜单和相邻的段落？我试过添加样式浮动左。它没有用。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pull-right">
      <div class="form-group">
        <label for="sel1">Select(select one):</label>
        <select class="form-control" id="sel1">
          <option>Day</option>
          <option>Week</option>
          <option>Month</option>
        </select>
      </div>
      <p>
        <label for="value">Value from 1 to 10:</label>
        <input type="text" id="value" readonly style="border:0; color:#f6931f; font-weight:bold;">
      </p>
      <div id="slider"></div>
    </div>

＆＃13;

Answer 1

您可以为元素设置display: inline-block以水平堆叠它们。这些元素的默认值为display: block，它允许它占用整个宽度并将下一个元素包装到新行。

＆＃13;

.form-group,
p {
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pull-right">
  <div class="form-group">
    <label for="sel1">Select(select one):</label>
    <select class="form-control" id="sel1">
      <option>Day</option>
      <option>Week</option>
      <option>Month</option>
    </select>
  </div>
  <p>
    <label for="value">Value from 1 to 10:</label>
    <input type="text" id="value" readonly style="border:0; color:#f6931f; font-weight:bold;">
  </p>
  <div id="slider"></div>
</div>

＆＃13;

如何横向制作我的内容堆栈

1 个答案: