Question

我正在开发一个网站并陷入困境。我正在使用timepicker而我正在设计一个包含此类功能的有序列表。这是我jsFiddle。这是我的代码：

    <!-- FAQ Nav -->
    <div class="col-md-10">
        <div class="widget-container fluid-height">
            <div class="heading">
                <h2 id="bowl_info_start">Please select a bowl on your left to populate this field</h2>
                <p id="bowl_name"></p>
            </div>
            <div id="itinerary_main" class="widget-content padded">
            <!-- content of the itinerary -->
                <ol>
                    <li>
                        <div class="input-group bootstrap-timepicker">
                        <input class="form-control" id="timepicker-default" type="text"><span class="input-group-addon"><i class="fa fa-clock-o"></i></span></input>
                        </div>
                    </li>
                        <li>Tea</li>
                        <li>Milk</li>
                    </ol>               
            </div>
        </div>
</div>

我想做的是这样的事情：

但我得到的是：

我希望timepicker与有序列表项位于同一行。然后我打算在那里制作一个无序的子列表。

我的主要麻烦是让时间选择器与有序列表项位于同一行。我试过调整css，但无法弄清楚什么是错的。任何帮助表示赞赏！

Answer 1

所以将“float：right”添加到.input-group.bootstrap-timepicker似乎会给出你想要的结果。

.input-group.bootstrap-timepicker {
    float: right;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- DataTables -->
<div class="row">
    <!-- FAQ Nav -->
    <div class="col-md-10">
        <div class="widget-container fluid-height">
            <div class="heading">
                    <h2 id="bowl_info_start">Please select a bowl on your left to populate this field</h2>

                <p id="bowl_name"></p>
            </div>
            <div id="itinerary_main" class="widget-content padded">
                <!-- content of the itinerary -->
                <ol>
                    <li>
                        <div class="input-group bootstrap-timepicker">
                            <input class="form-control" id="timepicker-default" type="text"><span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
                            </input>
                        </div>
                    </li>
                    <li>Tea</li>
                    <li>Milk</li>
                </ol>
            </div>
        </div>
    </div>
</div>

你也可以改变

.input-group.bootstrap-timepicker {
    float: right;
}

要

.input-group.bootstrap-timepicker {
    display: inline-table;
}

JQuery timepicker与有序列表项位于同一行

1 个答案: