如何将 2 div 保持在一行中？ [复制]答案

【问题标题】：How can keep the 2 div in one line? [duplicate]如何将 2 div 保持在一行中？ [复制]
【发布时间】：2013-11-08 09:41:14
【问题描述】：

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

我想把它们排成一行，怎么做？

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.

【问题讨论】：

来源：jsfiddle.net/sstong123/ZKKFU/1
补充：如何设置新闻居中？

标签： html css

【解决方案1】：

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

见Fiddle

【讨论】：

如何设置新闻居中？
是的，Harim 我已经编辑了我的答案。在newsbar 类中，您需要添加text-align: center; 参见此处jsfiddle.net/ZKKFU/22
是的，我明白了，谢谢 Roopendra。

【解决方案2】：

这是小提琴。添加

float:left

到两个 div。 Fiddle

【讨论】：

【解决方案3】：

使用display:inline-block

Here is the fiddle.

【讨论】：

【解决方案4】：

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

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

内联块的 CSS 规则

#id { display:inline-block; }

【讨论】：

【解决方案5】：

你研究过你的主题吗？

 #newsbar
 {
     float:left; 
 }

【讨论】：

【解决方案6】：

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

float:left;

对于第二个 div ：

float:right;

【讨论】：

【解决方案7】：

试试这个。 Demo

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

【讨论】：

【解决方案8】：

使用有 2 个 div 空间的宽度，而不是使用

浮动：左；

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

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案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 做成一张小桌子就行了..

【讨论】：

【解决方案11】：

    display:inline-block

#div1{float:left}

#div2{float:right}

【讨论】：

【解决方案12】：

在你的 css 中尝试添加

float: left;

和

display: inline-block;

那应该可以解决它。

【讨论】：