Question

我有三个超链接，我想将它们放在div的右边缘附近。这个div位于另一个div中，名为mainHeader。这就是我所拥有的：

<div class="mainHeader">
<div id="Buttons">
<a href="#" class="myButton">New Customer</a>
<a href="#" class="myButton2">Sign In</a><br />
<input type="text" />
<a href="#" class="myButton3">Go</a>
</div>
</div>

到目前为止css是这个：

.mainHeader
{
    background: #b2b2b2;
    height:60%;
    margin-top:0px;
    width:100%;
}

所以，我希望所有这四个控件都位于div'mainHeader'的右边缘附近。前两个链接myButton和myButton2应该在一行中，在它们下面应该有文本框和另一个按钮。知道如何解决这个问题吗？在此先感谢Laziale

Answer 1

我不确定这是否是最佳方式，但我只是使用按钮更改了文本框的位置，然后将direction:rtl; css规则添加到mainHeader类。

这是小提琴： http://jsfiddle.net/QHuv3/

如果你的mainHeader div包含的不仅仅是Buttons div而且你不想要direction:rtl; css规则，那么你可以这样做：

.mainHeader, #Buttons
{
    background: #b2b2b2;
    height:60%;
    margin-top:0px;
    width:100%;
}
#Buttons
{
  direction:rtl;
}

HTML也应该切换文本框和按钮位置。

第二种情况的小提琴： http://jsfiddle.net/QHuv3/1/

Answer 2

这应该这样做。您需要相应地更改宽度/边距http://jsfiddle.net/jalbertbowdenii/YYaP2/1/

Answer 3

这是一个“更经典”的解决方案（http://jsfiddle.net/vUzBg/）：

HTML：

<div class="mainHeader">
    <div id="Buttons">
        <div class="top">
            <a href="#" class="myButton">New Customer</a>
            <a href="#" class="myButton2">Sign In</a>
        </div>
        <div class="bottom">
            <input type="text" />
            <a href="#" class="myButton3">Go</a>
        </div>
    </div>
</div>

CSS：

.mainHeader
{
    background: #b2b2b2;
    height:60%;
    margin-top:0px;
    width:100%;
    overflow: auto;
}
.top, .bottom {
    float: right;
}
.bottom {
    clear: right;   
}

位于div右边缘附近的超链接

3 个答案: