Question

这是我的代码：

<div class="row">
    <div class="col-md-12 table">
        <div class="middle">Title XPTO</div>
        <div class="middle">Display:</div>
        <select class="form-control">
            <option label="10" selected="selected" value="10">10</option>
            <option label="25" value="25">25</option>
            <option label="50" value="50">50</option>
        </select>
    </div>
</div>

CSS：

.table {
    display: table !important;
}
.middle {
    display: table-cell !important;
    vertical-align: middle;
}

DEMO： https://jsfiddle.net/jkf2L49e/

我想将文本“Display：”放在最接近select元素的位置。并且选择必须尽可能正确（位置）。这样做的最佳方法是什么，并使其响应？

Answer 1

你也应该制作表格布局的<select>部分，所以只需用另一个<div>包裹它。标记将是这样的：

<div class="col-md-12 table">
    <div class="left">Title XPTO</div>
    <div class="middle">Display:</div>
    <div class="right">
        <select class="form-control">
            <option label="10" selected="selected" value="10">10</option>
            <option label="25" value="25">25</option>
            <option label="50" value="50">50</option>
        </select>
    </div>
</div>

要将文本对齐，您只需在中间单元格中使用text-align:right即可。 CSS就像这样（在下面的评论中提到了调整）。

.table {
    display: table;
}
.table > div {
    display: table-cell;
    vertical-align: middle;
    white-space: nowrap;
}
.table .middle {
    text-align: right;
    width: 100%;
}
.table select {
    width: auto;
}

更新了演示 - https://jsfiddle.net/jkf2L49e/4/

Answer 2

试试这个完整的代码：

＆＃13;

.table {
    display: table !important;
}
.middle {
    display: table-cell !important;
    vertical-align: middle;
}
.text-right{
  text-align:right;
}

＆＃13;

现在将此类添加到包含文本＆＃34;显示＆＃34;

的div中

＆＃13;

<div class="row">
<div class="col-md-12 table">
    <div class="middle">Title XPTO</div>
    <div class="middle text-right">Display:</div>
    <select class="form-control">
        <option label="10" selected="selected" value="10">10</option>
        <option label="25" value="25">25</option>
        <option label="50" value="50">50</option>
    </select>
</div>

＆＃13;

Answer 3

请尝试以下完整代码。这将是最好的解决方案。

<html>

.wrapper { 宽度：100％;

} .leftdiv { 宽度：90％; 向左飘浮; } .rightdiv { 宽度：8％; 浮动：权利; }

标题XPTO

<div class="rightdiv">Display:

    <select>
        <option label="10" selected="selected" value="10">10</option>
        <option label="25" value="25">25</option>
        <option label="50" value="50">50</option>
    </select>
</div>
</div>

如果对您有帮助，请将答案标记为正确答案。

将div与右对齐，垂直对齐中间

3 个答案: