Question

在网站上，我想要这样的布局：

Some text [input 1]
          [input 2]

我想：

第一个输入将放置在下一个单词出现的位置，“text”和“[input 1]”之间的距离为一个空格
第二个输入放在第一个输入下面并与之对齐
如果文字宽度发生变化，两个输入都向左或向右移动

这是我尝试过的，但没有成功：

当我在DIV中包围两个输入时，没有任何样式，它看起来像这样：

Some text
[input 1]
[input 2]

当我将DIV设为display: inline-block时，它看起来像是这样，即文字掉到底部：

          [input 1]
Some text [input 2]

当我将DIV设置为display: inline或将文本浮动到左侧时，它看起来像这样：

Some text [input 1]
[input 2]

当我设置剩余边距的div时，我得到：

Text      [input 1]
          [input 2]

即。当我改变文字宽度时，位置不会改变。

我可以用表格轻松完成这项工作。如果没有JavaScript，请告诉我如何在CSS中完成它。谢谢。

Answer 1

DEMO

<强> HTML

<div>
    <div id="text-container">
        Some text
    </div>
    <div id="input-container">
        <input />
        <input />
    </div>
</div>

<强> CSS

#text-container:after {
    content:"\00a0"; /*spacing*/
}
#text-container,
#input-container {
    display:inline-block;
    vertical-align:top;
}
#input-container input {
    display:block;
}

Answer 2

这是可重复的，反应迅速！

Live demo (click).

<form>
  <div>
    <label>Set One</label>
    <label>Set Two</label>
    <label>Set Three</label>
  </div>
  <div class="inputs">
    <input type="text" placeholder="set 1">
    <input type="text" placeholder="set 1">
    <input type="text" placeholder="set 2">
    <input type="text" placeholder="set 2">
    <input type="text" placeholder="set 3">
    <input type="text" placeholder="set 3">
  </div>
</form>

CSS：

form {
  position: relative;
}

form div {
  display: inline-block;
  vertical-align: top;
}

label, input { 
  display: block;
}

label {
  margin-top: 26px;
}

label:first-child {
  margin-top: 0;
}

@media (max-width: 300px) {

label {
  margin-bottom: 62px;
}
form .inputs {
  display: block;
  position: absolute;
  top: 0;
}
input {
  margin-top: 20px;
}

}

这可能是最简单的方法，即使用CSS和一些非语义元素模拟表。的 Live demo (click).

<form class="table"> <div class="row"> <label class="cell">Set One</label> <div class="cell"> <input type="text" placeholder="set 1"> <input type="text" placeholder="set 1"> </div> </div> <div class="row"> <label class="cell">Set Two</label> <div class="cell"> <input type="text" placeholder="set 2"> <input type="text" placeholder="set 2"> </div> </div> </form>

<强> CSS：

.table { display: table; } .row { display: table-row; } .cell { display: table-cell; } input { display: block; } @media (max-width: 300px) { .cell { display: block; } }

Answer 3

使用CSS3 flexbox的版本： DEMO

即使输入是内联元素并且它们包装也可以工作。

HTML

<div class="flexbox">
    <div>
        Some text
    </div>
    <div class="inputs">
        <input />
        <input />
    </div>
</div>

CSS

.flexbox { display: flex }
.inputs input { display: block }

CSS中的“流体”悬挂缩进

3 个答案: