0

我创建了一个新闻横幅和一个按钮作为两个独立的<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>

小提琴。

4

12 回答 12

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

见小提琴

于 2013-10-29T09:54:06.250 回答
0

在你的CSS尝试添加

float: left;

和 

display: inline-block;


那应该解决它。

于 2013-10-29T12:09:32.830 回答
0

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

float:left;

对于第二个 div ：

float:right;
于 2013-10-29T09:54:52.153 回答
0

尝试这个。 演示

div
{
    display:inline-block;
    float: left;
}
于 2013-10-29T09:55:40.773 回答
0

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

向左飘浮;

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

于 2013-10-29T09:56:49.290 回答
0

这是小提琴。添加

float:left

到两个div。 小提琴

于 2013-10-29T09:53:49.280 回答
0

利用display:inline-block

这是小提琴。

于 2013-10-29T09:53:55.843 回答
0

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

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

下面的 CSS 规则用于内联块

#id { display:inline-block; }
于 2013-10-29T09:54:11.760 回答
0

你研究过你的主题吗？

 #newsbar
 {
     float:left; 
 }
于 2013-10-29T09:54:40.603 回答
0

干得好。

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;
}
于 2013-10-29T09:57:27.057 回答
0

尝试这个，

<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 变成一张小桌子..

于 2013-10-29T10:01:16.867 回答
0 
    display:inline-block

#div1{float:left}

#div2{float:right}
于 2013-10-29T10:04:23.340 回答