Html CSS - 左右对齐在同一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1062783/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS - Left and Right alignment on the same line
提问by Offirmo
Below is some sample code, which has all the links right-justified. I would like to change the CSS so the "Left" link is left-justified, the others are right-justified, but they are all on the same line. How do I do that?
下面是一些示例代码，其中所有的链接都是右对齐的。我想更改 CSS，使“左”链接左对齐，其他链接右对齐，但它们都在同一行上。我怎么做？
Thanks in advance,
提前致谢，
John
约翰
The HTML:
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>
The CSS:
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;
}
采纳答案by Emily
Float the left to the left
向左浮动
.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>
Butyou need to remove the margin-top:300px from a.links:linkotherwise the left will be 300px below the right.
但是你需要移除 margin-top:300px a.links:link否则左边会比右边低 300px。
回答by Offirmo
It's an old post, but it's well ranked on google so it's still relevant.
这是一个旧帖子，但它在谷歌上排名很好，所以它仍然相关。
I used another way to align both right and left on the same line, without using any ugly float. It makes use of a table-like display :
我使用另一种方法在同一条线上对齐左右两边，而不使用任何丑陋的浮动。它使用类似表格的显示：
HTML :
HTML :
<footer>
<nav>links (to the left)</nav>
<p>copyright (to the right)</p>
</footer>
CSS :
CSS :
footer
{
display: table;
width: 100%;
}
footer nav
{
display: table-cell;
text-align: left;
}
footer p
{
display: table-cell;
text-align: right;
}
I find it much cleaner this way.
我觉得这样更干净。
Hope this helps someone !
希望这有助于某人！
回答by Rich Bradshaw
Put each in a seperate div. Float one left, one right. Set the widths.
将每个放在单独的 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
CSS
.mainlinks .left {
float:left;
width: 49%;
}
.mainlinks .right {
float:right;
width: 49%;
}
回答by rahul
<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>
回答by dusoft
you need to put it to separate blocks (div) or override via more specific CSS applying to the link as proposed by @skurpur
您需要将它放在单独的块 (div) 或通过更具体的 CSS 覆盖应用到@skurpur 建议的链接
i believe you must add display:block to the link to position it - e.g. only block elements can be positioned.
我相信您必须将 display:block 添加到链接以定位它 - 例如，只能定位块元素。
回答by blazkovicz
You can use display: flex;on container with justify-content: space-between;and align-items: baseline;. There is good sass mixin for flex supporting old and new syntax: https://github.com/mastastealth/sass-flex-mixin
您可以display: flex;在容器上使用justify-content: space-between;和align-items: baseline;。有很好的 sass mixin 来支持新旧语法的 flex：https: //github.com/mastastealth/sass-flex-mixin
