2

我正在尝试使用 display:table 样式将两个输入元素彼此相邻，并在第一个输入上添加一个前置项目。但是，这会导致第二个输入元素与第一个元素重叠。我试过使用 box-sizing:border-box 没有运气。似乎问题是我限制了父 div 的宽度，然后将输入元素的宽度设置为 100%，以便它填满父元素，但这根本不起作用。这是一个 JSfiddle 示例：

HTML

<div class="container">
    <div class="row">
        <div class="cell input-prepend">
            <span class="add-on">HI</span>
            <input type="text" />
        </div>
        <div class="cell">
            <input type="number"/>
        </div>
    </div>
</div>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 10px;
}

.row {
    display: table-row;
    width: 100px;
}

input[type=text] {
    width: 100%;
}

.cell {
    display: table-cell;
}

http://jsfiddle.net/5pgPY/7/

目标是获得一堆像上面这样的行，其中文本输入的每个实例都有一些标签，其宽度可能不同，所以我需要一些方法来确保文本输入全部对齐。也许我应该放弃使用前置元素并为此使用单独的 div ？

4

2 回答 2

2

看不出问题出在哪里。无论如何，这对我有用：

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 10px;
}

.row {
    display: table-row;
    width: 200px;
}

input[type=text] {
    width: 100%;
}

.cell {
    margin-right: 60px;
    float: left;
}
于 2013-02-17T07:20:42.637 回答
1

在您的示例中，您没有在第二个 input 中使用 input-prepend 类，您应该将其编写如下

<div class="cell input-prepend">
        <input type="number"/>
    </div>

在 css 中从输入中删除 width=100% 并使用 margin-right

    input[type=text] {
       margin-right:10px;

      }

你能检查一下 JSfidlle更新的 JSfiddle prepend

<div class="container">
<div class="row">
    <form class="form-inline">
        <input type="text" class="input-small" placeholder="Email">
        <input type="password" class="input-small" placeholder="Password">
    </form>
    <form class="form-inline">
        <input type="text" class="input-small" placeholder="Email">
        <input type="password" class="input-small" placeholder="Password">
    </form>
</div>
</div>
于 2013-02-17T07:20:37.300 回答