如何使我的內容水平堆疊

Question

我想知道如何將下拉菜單和段落彼此堆疊在一起？ 我嘗試通過向左添加樣式浮動。 它沒有用。

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

Answer 1

您可以為元素設置display: inline-block以水平堆疊它們。 這些元素的默認值是display: block ，它允許它占據整個寬度並將下一個元素換行。

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

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