Question

我一直遇到这个问题，我想做一个＆＃34;页面导航＆＃34;有两个链接（向前和向后）。在一条线上，我喜欢最左侧的链接，并且在同一条线上，最右边的链接。如果花括号是父对象的范围，它看起来像这样：

{Backwards                    Forwards}

左侧链接的左侧应与内容边界齐平（是您所谓的内容？我的意思是在填充之前），反之亦然。

感谢。

Answer 1

有很多方法可以做到这一点......其中一个是使用内联块元素，另一个是使用浮点数等。

下面是两个例子，第二个例子是父子结构，就像你想要的那样。

＆＃13;

div {
  display: inline-block;
  height: 20px;
  width: 300px;
  background: #eee;
  padding: 20px;
  text-align: center;
  }

#l {
  float: left;
  }

#r {
  float: right;
  }

＆＃13;

<a>Backwards</a><div>Content</div><a>Forwards</a>
<br /><br />
<div><a id="l">Backwards</a> Content <a id="r">Forwards</a></div>

＆＃13;

Answer 2

float：左边第一个，float：右边第二个。我通常使用类名.fl / .fr和一个包含明确的div：两者。由于div的高度崩溃使用了一个crossbrowser hack

<style>
/*---------------float / clear-------------*/
.fl {float: left;}
.fr {float: right;}
.clear:after {
    content: ".";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clear {display:inline-block;}
/* Hide from IE Mac \*/
.clear { display:block; }
/* End hide from IE Mac */
* html .clear {height:1px;}
/*---------------clear-------------*/
</style>

<div class="clear">
    <a class="fl" href="#">backward</a>
    <a class="fr" href="#">forward</a>
</div>

Answer 3

这是我今天正在处理的菜单。您只需将float: right;添加到第二个<a>标记即可。这是我的例子：

JS Bin

两个<a> tags on the opposite side of the page, on the same line</a>

3 个答案: