Question

我通过javascript创建一个弹出窗口，下面是渲染的html。我希望有一个包含标题（＆＃34; Preisrechner＆＃34;）的标题和您在下面看到的两个图标。我无法真正调整它们，以便它们排成一排。如何获得带标题和图标的行？

<div style="display: table; top: 51px; right: 0px;" id="quickrechner" class="popup-wrapper">
<div class="my-popup-box">
    <div class="my-popup-heading"><h5>Preisrechner</h5>

        <div class="headingIcons">
            <ul>
                <li><i class="ion-ios-navigate-outline"></i></li>
                <li><i class="ion-ios-close-empty"></i></li>
            </ul>
        </div>
    </div>
    <div class="my-popup-content">
        <div class="row">
            <div class="col-md-12 col-xs-12">
                <div class="row">
                    <div class="col-md-6 col-xs-12">
                        <div class="col-md-4"><label for="e">EK - Preis:</label></div>
                        <div class="col-md-8"><input class="buyIn" id="e" type="text"></div>
                    </div>
                    <div class="col-md-6 col-xs-12">
                        <div class="col-md-4"><label for="d">EK - Preis:</label></div>
                        <div class="col-md-8"><input class="buyIn" id="d" type="text"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

.popup-wrapper{
    display:none;
    position:absolute;
    top:51px;
    background:#bdbdbd;
    z-index:10
}

.my-popup-box{
    display:table-cell;
    line-height:18px
}

.my-popup-heading{
    width:100%;
    padding-left:5px;
    float:left;

}

.my-popup-heading i{
    font-size:1.1em;
    font-weight:700;
    margin:0 8px;
    position: relative;
    float:right;



}

.my-popup-heading .heading-icons{
    position:absolute;
    right:10px
}

.my-popup-content{
    margin-left:auto;
    margin-right:auto;
    width:100%;
    padding:9px
}

期望的结果：

desRes

Answer 1

你似乎在使用bootstrap，所以一个解决方案就是：

<div class="my-popup-heading"><h5 class="pull-left">Preisrechner</h5>

            <div class="headingIcons">
                <ul class="list-inline pull-right">
                    <li><i class="ion-ios-navigate-outline"></i></li>
                    <li><i class="ion-ios-close-empty"></i></li>
                </ul>
            </div>
        </div>

在基本情况下，您可以为图标和标题提供不同的floats，以达到您想要的效果。 .pull-right和.pull-left是提供浮动的引导类。

Updated Fiddle

Answer 2

我使用您想要的简单更改创建了JSfiddle。

以下是重要的CSS更改：

.my-popup-heading h5{
    display: inline-block;
    width: 45%;
    float: left;
}

.headingIcons ul li{
  display: inline;
}

.my-popup-heading .heading-icons{
   display: inline-block;
   float:right;
   width:45%;
}

为了在同一行上包含块级元素（<h5>，<ul>），您必须使用inline或inline-block等显示类型。要让<li>在同一行，您必须使用display:inline。

如果我误解了，请在下面发表评论。

Answer 3

尝试使用：

ul {
    float: right;
}
h5 {
    float: left;
}

你当然应该把它们包起来。否则它们将适用于所有h5和ul标签...

标题行不会出现在一行中

3 个答案: