Question

我创建了一个新闻横幅和一个按钮作为两个单独的<div>元素，但我发现它们分为两行。

我想把它们放在一行，怎么做？

HTML：

<div id="outer">
    <div>
        <div>
            <div id="newsbar">news bar</div>
            <div id="button"><span role="button"> <input type="button" value="submit"/></div>
        </div>
    </div>
</div>

fiddle

Answer 1

#newsbar {
    float:left;
    width:400px;
    text-align: center;
}
#button{
    float:left;
}

请参阅Fiddle

Answer 2

这是小提琴。添加

float:left

两个div。 Fiddle

Answer 3

使用display:inline-block

Here is the fiddle.

Answer 4

http://jsfiddle.net/ZKKFU/4/

将两个div设置为具有内联样式（或者我在上面的示例中选择的内联块。）

下面的CSS规则用于内联块

#id { display:inline-block; }

Answer 5

你研究过你的主题吗？

 #newsbar
 {
     float:left; 
 }

Answer 6

尝试为每个添加宽度，然后使用第一个：

float:left;

和第二个div：

float:right;

Answer 7

试试这个。 Demo

div
{
    display:inline-block;
    float: left;
}

Answer 8

使用宽度为2 div的宽度，而不是使用

Float：left;

这将使div彼此相邻，当然，你可以使用你选择的任何其他方向

Answer 9

你走了。

http://jsfiddle.net/alaminopu/ZKKFU/15/

HTML：

<div id="outer">
    <div id="news-wrap">
        <div>
            <div id="newsbar"></div>
            <div id="button"><span role="button"> <input type="button" value="submit"/></div>
        </div>
    </div>
</div>

CSS：

#news-wrap{
    overflow:hidden;
}
#newsbar{
    float:left;
    width:200px;
}

Answer 10

试试这个，

<table>
<tr>
<td width="200px" align="center">
<div id="outer">
<div id="newsbar"></div></td>
<td>
<div id="button"><span role="button"> <input type="button" value="submit"/></div></td>
</div>
</tr>
</table>

将你的div变成一张小桌子。

Answer 11

    display:inline-block

#div1{float:left}

#div2{float:right}

Answer 12

在你的CSS中尝试添加

float: left;

和

display: inline-block;

那应该解决它。

如何将2 div保持在一行？

12 个答案: