Question

所以我的代码是这样的：

<div id="toolbar">
<div style='border: none; font-family: Arial, Helvetica, sans-serif;'>
    <font color="#fff">
        <marquee bgcolor="#000" direction="left" loop="25" width="95%">Welcome to 

the NabzZzolution Mercenarie Group of the AboveUltimate-HydraBlast Server! If you are a 

member please register yourself.</marquee>
    </font>
</div>
<div>
    <a style="text-align:left;"class="wsite-button wsite-button-small wsite-button-

highlight" href="http://aunabzzzolution.weebly.com/log-in.html" target="_blank">
    <span class="wsite-button-inner">Log In</span>
    </a>
</div>
</div>

以及它们的显示方式：http://aunabzzzolution.weebly.com/ 所以我希望登录按钮进入工具栏的第1行，而marqeee的东西就在它的右侧。有人能帮帮我吗？提前感谢您的帮助。

此致 Tasos Papalyras

Answer 1

使用CSS属性：display，其属性为inline或inline-block。

修改版本（格式正确）：

<div id="toolbar" style="display:inline">
    <div style='border: none; font-family: Arial, Helvetica, sans-serif;display:inline;'>
        <font color="#fff">
            <marquee bgcolor="#000" direction="left" loop="25" width="90%">
                Welcome to the NabzZzolution Mercenarie Group of the AboveUltimate-HydraBlast Server! If you are a member please register yourself.
            </marquee>
        </font>
    </div>
</div>

<div style="display:inline;">
    <a style="text-align:left;"class="wsite-button wsite-button-small wsite-button-highlight;" href="http://aunabzzzolution.weebly.com/log-in.html" target="_blank">
        <span class="wsite-button-inner">Log In</span>
    </a>
</div>

示例：http://jsfiddle.net/L8JfJ/

Answer 2

使用display:inline-block;

button {
   display:inline-block;
   // other props here
}

Answer 3

变化：

<font style="display: inline-block; width:80%">  // <== inline-block and width.
  ...
</font>

... 

<div style="text-align:left; display:inline-block">      // <== inline-block
    <div style="height: 10px; overflow: hidden;"></div>

    <a class="wsite-button wsite-button-small wsite-button-highlight"  href="http://aunabzzzolution.weebly.com/log-in.html" target="_blank">
        <span class="wsite-button-inner">Log In</span>
    </a>
    <div style="height: 10px; overflow: hidden;"></div>
</div>

有人可以帮我让两个工具栏的div显示在同一行吗？

3 个答案: