Question

我正在尝试将标题中的两个元素（粉红色部分和绿色部分）设为内联（在一行中，而不是换行到当前绿色部分的新行）。

但是，我不能使用display：inline;因为物品需要有宽度。

如何实现这两个内联元素并保持其宽度？

以下是元素所在的页面：https://dl.dropboxusercontent.com/u/270523/help/new.html

Answer 1

内联块解决方案：

#logo {
    width: [WIDTH1]%;
    min-width: 225px;
    background: pink;
}

#input{   
    width: [WIDTH2]%;
    background: green;
}

#input,#logo {
    display: inline-block;
    height: 100%;
    vertical-align:top;
}

其中[WIDTH1] + [WIDTH2] = 100％。为此，您需要删除两个元素之间的空格。

所以不像现在这样：

<section id="logo"></section>
<section id="input">
    <input id="searchInput" type="text" name="search" autocomplete="off">
</section>

但相反：

<section id="logo"></section><section id="input">
    <input id="searchInput" type="text" name="search" autocomplete="off">
</section>

Answer 2

您的部分输入正在下降，因为它具有额外的宽度，使其大约为77％，然后它将适合您。

#input{width:77%;}

Answer 3

您已将浮点数设置为#input部分，但未设置为#logo部分。

#logo {
width:20%;
float: left;
}

Answer 4

首先，它非常好你使用html5标签对你有好处。在我看来，最简单的方法是对标题中的所有元素使用float，但记住clear:both父标记。

以下是修改代码的演示：http://jsfiddle.net/bartekbielawa/WgtAP/

制作两个尺寸为内联的元素

4 个答案: