Question

我希望在一行上有一些文本，然后是同一行上的输入框。

但是，输入框始终会转到下一行，即使它在与文本相同的行上有足够的空间。我查看了文档，并且只有建议可以做我想要的形式（即类形式 - 水平）。

但是，我只想要一些文本（标签），然后是输入框。

看简单的JSFiddle http://jsfiddle.net/dz089gac/1/

<div class="container">
    <div class="row">
        <p>Hi</p>
        <input type="text" placeholder="hi">
    </div>
</diV>

Answer 1

使用以下代码：

<div class="container">
    <div class="row">
        <span>Hi</span>
        <input type="text" placeholder="hi">
    </div>
</diV>

使用span代替p代码p创建元素块，并在代码关闭后放置一个新行。

Answer 2

段落（p）是块级元素。这意味着它占据了它所在的整个“行”。

您应该强烈考虑使用标签（标签），这在此上下文中更具语义正确性，因此提供了一些好处：

<div class="container">
    <div class="row">
        <label for="my_input_element">Hi</label>
        <input type="text" placeholder="hi" id="my_input_element">
    </div>
</diV>

单击标签将焦点设置在相应的输入元素上，并且屏幕阅读器（和其他设备）识别标签与输入相关联，而不是与不相关的文本块相关联。这完全标签是用于什么的。

小提琴：http://jsfiddle.net/s62evwmz/

Answer 3

这是因为p是一个块元素，下一个元素将从一个新行开始。

如果您无法更改元素类型或将输入移至p标记，则可以使用css将p元素内联。

.row p{
   display:inline-block;
}

http://jsfiddle.net/dz089gac/3/

Answer 4

放入段落内。

<p>Hi <input type="text" placeholder="hi"></p>

但如果您使用的是labels而不是p

，那就更好了

<label>Hi <input type="text" placeholder="hi"></label>

Answer 5

我不知道这是否是您想要的，但我已将输入类型放入标记。

Updated fiddle here

Answer 6

只需将输入放在

中

e.g。

<div class="container">
    <div class="row">
        <p>Hi <input type="text" placeholder="hi"></p>
    </div>
</diV>

fiddle

Answer 7

您可以将标记的显示属性设置为内联块值，即display=inline-block，如果需要，您可以为Box提供一些余量，这将在它们之间添加空格。即。

<div class="container">
    <div class="row">
        <p style="display:inline-block;">Hi</p>
        <input type="text" placeholder="hi" >
    </div>
</diV>

演示链接：http://jsfiddle.net/dz089gac/10/

如何让输入框与其他内容显示在同一行？

7 个答案: