Question

我在一行中有两个HTML元素。谁应该显示这样的东西：

为此，我将元素显示为内联，并且我也分别设置了左右浮动。但是它们显示的是这样的：

您可以看到它们没有正确对齐。

＆＃13;

.selected-account{
    display: inline;
    float: right;
    color: #0679ca;
}

.select-account-accordion{
    display: inline;
    float: left;
    color: #0679ca;
}

＆＃13;

<div id="select-account" class="col-sm-12 col-md-12 disabled-billing-accordion">
         <h3 id="select-acct" class="select-account-accordion">Select Account(s)</h3>
         <span id="account-selected" class="selected-account">0 of 8 account selected</span> 
        </div>

＆＃13;

你可以就此提出建议吗？

编辑：我想因为我将这两个元素放在我用于创建手风琴的div类中，所以这就是为什么它会造成麻烦。请参阅下面的样式，以获得正在上课的＃34; disabled-billing-accordion＆＃34;

.disabled-billing-accordion h3::before{
            background: url("/static/img/accordion.png") no-repeat scroll 0 0
                rgba(0, 0, 0, 0);
            background-position: -1px -97px;
            content: " ";
            width: 34px;
            height: 34px;
            left: 0;
            position: absolute;
            top: 25px;
            margin-left: 1em
        }

    .disabled-billing-accordion h3{
        padding: .2em 0 0 3em;
        color: #0679ca;
        font-size: 1.5em;
        line-height: 2.1875em;
        margin-bottom: 8px;
        font-weight: 100 !important

    }

.disabled-billing-accordion{
    padding: 10px;
    border-bottom: 1px solid #bdbdbd
}

Answer 1

现在您可以像这样定义margin:0;和line-height

＆＃13;

.selected-account{
    float: right;
    color: #0679ca;
  margin:0;
  line-height:20px;
}

.select-account-accordion{
    float: left;
    color: #0679ca;
  margin:0;
  line-height:20px;
}

＆＃13;

<div id="select-account" class="col-sm-12 col-md-12 disabled-billing-accordion">
         <h3 id="select-acct" class="select-account-accordion">Select Account(s)</h3>
         <span id="account-selected" class="selected-account">0 of 8 account selected</span> 
        </div>

＆＃13;

Answer 2

h3有余量。尝试

#select-acct {
  margin: 0;
}

Answer 3

你可以使用position：fixed并添加左：“first first” 像，

div1{
position:fixed;
width:200px;
height:300px;
}
div2{
position:fixed;
left:200px;
width:200px;
height:300px;
}

希望它会有所帮助。

修改

我在代码中添加了一些内联css position:fixed这是屏幕截图。

Answer 4

如果您使用h3，如果您在检查时检查图像，则会默认使用一些边距和行高，参考https://plnkr.co/edit/3O4773wA10jV1tC92zik?p=preview

所以你必须为margin和line-height

添加样式

.selected-account{
    display: inline;
    float: right;
    color: #0679ca;
    margin:0;
    line-height:20px;
}

.select-account-accordion{
    display: inline;
    float: left;
    line-height:20px;
    margin:0;
}

Answer 5

您只需从h3中移除float: left;属性，即

.select-account-accordion {
    display: inline;
    /* float: left; */ //Remove this line
    color: #0679ca;
}

Answer 6

要求减少margin-top: 0px; <h3 id="select-acct" class="select-account-accordion">Select Account(s)</h3>
或
为。添加等效margin-top示例margin-top: 20px <span id="account-selected" class="selected-account">0 of 8 account selected</span>

＆＃13;

.selected-account{
    margin-top: 0px;
    display: inline;
    float: right;
    color: #0679ca;
}

.select-account-accordion{
    margin-top: 0px;
    display: inline;
    float: left;
    color: #0679ca;
}

＆＃13;

<div id="select-account" class="col-sm-12 col-md-12 disabled-billing-accordion">
         <h3 id="select-acct" class="select-account-accordion">Select Account(s)</h3>
         <span id="account-selected" class="selected-account">0 of 8 account selected</span> 
        </div>

＆＃13;

如何使两个HTML元素在一行中对齐？

6 个答案: