下面是一些示例代码,其中所有链接都是右对齐的。我想更改CSS,因此“左”链接是左对齐的,其他链接是右对齐的,但它们都在同一行。我该怎么做?
提前致谢,
约翰
HTML:
<div class="mainlinks">
<a href="left.php" class="links">Left</a>
<a href="right1.php" class="links">Right1</a>
<a href="right2.php" class="links">Right2</a>
</div>
CSS:
.mainlinks
{
text-align:right;
margin-top:3px;
margin-right:10px;
margin-bottom:0px;
padding:0px;
}
a.links:link {
color: #FF0000; text-decoration: none;
text-align:center;
margin-left:8px;
margin-top:300px;
margin-bottom:0px;
padding:2px;
font-family:Arial, Helvetica, sans-serif;
font-size: 14px;
}
答案 0 :(得分:15)
这是一个老帖子,但它在谷歌排名很好所以它仍然相关。
我使用另一种方法在同一条线上左右对齐,而不使用任何丑陋的浮动。它使用了类似于表格的显示:
HTML:
<footer>
<nav>links (to the left)</nav>
<p>copyright (to the right)</p>
</footer>
CSS:
footer
{
display: table;
width: 100%;
}
footer nav
{
display: table-cell;
text-align: left;
}
footer p
{
display: table-cell;
text-align: right;
}
我觉得这样更干净。
希望这有助于某人!
答案 1 :(得分:10)
向左浮动
.left {float:left;}
<div class="mainlinks">
<a href="left.php" class="links left">Left</a>
<a href="right1.php" class="links">Right1</a>
<a href="right2.php" class="links">Right2</a>
</div>
但是你需要删除margin-top:距离a.links:link
300px,否则左边将比右边低300px。
答案 2 :(得分:3)
将每个人放在一个单独的div中。左边一个,右边一个。设置宽度。
<div class="mainlinks">
<div class="left">
<a href="left.php" class="links">Left</a>
</div>
<div class="right">
<a href="right1.php" class="links">Right1</a>
<a href="right2.php" class="links">Right2</a>
</div>
</div>
CSS
.mainlinks .left {
float:left;
width: 49%;
}
.mainlinks .right {
float:right;
width: 49%;
}
答案 3 :(得分:1)
<style>
.mainlinks
{
text-align:right;
margin-top:3px;
margin-right:10px;
margin-bottom:0px;
padding:0px;
}
a.links:link {
color: #FF0000; text-decoration: none;
text-align:center;
margin-left:8px;
margin-top:300px;
margin-bottom:0px;
padding:2px;
font-family:Arial, Helvetica, sans-serif;
font-size: 14px;
}
.right { float: right }
.left { float: left }
</style>
<div class="mainlinks">
<a href="left.php" class="links left">Left</a>
<a href="right1.php" class="links right">Right1</a>
<a href="right2.php" class="links right">Right2</a>
</div>
答案 4 :(得分:0)
你需要把它放到单独的块(div)或覆盖更多特定的CSS应用于@skurpur提出的链接
我相信你必须将display:block添加到链接以定位它 - 例如只能定位块元素。
答案 5 :(得分:0)
您可以在display: flex;
和justify-content: space-between;
的容器上使用align-items: baseline;
。有一个很好的sass mixin for flex支持新旧语法:https://github.com/mastastealth/sass-flex-mixin