在同一行左右对齐两个内联块答案

【问题标题】：Align two inline-blocks left and right on same line在同一行左右对齐两个内联块
【发布时间】：2012-05-03 14:18:13
【问题描述】：

如何对齐两个内联块，使一个在左侧，另一个在同一行右侧？为什么这么难？有没有类似 LaTeX 的 \hfill 可以消耗它们之间的空间来实现这一点？

我不想使用浮点数，因为使用 inline-blocks 我可以排列基线。当窗口对于他们俩来说都太小时，使用内联块我可以将 text-align 更改为 center ，它们将彼此居中。相对(parent) + Absolute(element) 定位和浮动有同样的问题。

HTML5：

<header>
    <h1>Title</h1>
    <nav>
        <a>A Link</a>
        <a>Another Link</a>
        <a>A Third Link</a>
    </nav>
</header>

CSS：

header {
    //text-align: center; // will set in js when the nav overflows (i think)
}

h1 {
    display: inline-block;
    margin-top: 0.321em;
}

nav {
    display: inline-block;
    vertical-align: baseline;
}

它们紧挨着，但我想要右边的nav。

【问题讨论】：

AFAIK 解决这个问题的唯一方法是使用浮动或绝对定位。您可以使用导航上的 margin-top 来实现相同的基线位置。
只需使用 margin-top 和浮动。没有那个或绝对定位是不可能做到这一点的。
使用 css 媒体查询根据视口的大小更改 css。您可以同时使用position: absolute 和inline-block

标签： css html

【解决方案1】：

编辑：自从我回答这个问题以来已经过去了 3 年，我想需要一个更现代的解决方案，尽管目前的解决方案可以做到这一点 :)

1.Flexbox

它是迄今为止最短且最灵活的。将display: flex; 应用于父容器并通过justify-content: space-between; 调整其子容器的位置，如下所示：

.header {
    display: flex;
    justify-content: space-between;
}

可以在这里在线看到-http://jsfiddle.net/skip405/NfeVh/1073/

但请注意，flexbox support 是 IE10 和更新版本。如果您需要支持 IE 9 或更早版本，请使用以下解决方案：

2.您可以在此处使用text-align: justify 技术。

.header {
    background: #ccc; 
    text-align: justify; 

    /* ie 7*/  
    *width: 100%;  
    *-ms-text-justify: distribute-all-lines;
    *text-justify: distribute-all-lines;
}
 .header:after{
    content: '';
    display: inline-block;
    width: 100%;
    height: 0;
    font-size:0;
    line-height:0;
}

h1 {
    display: inline-block;
    margin-top: 0.321em; 

    /* ie 7*/ 
    *display: inline;
    *zoom: 1;
    *text-align: left; 
}

.nav {
    display: inline-block;
    vertical-align: baseline; 

    /* ie 7*/
    *display: inline;
    *zoom:1;
    *text-align: right;
}

可以在此处查看工作示例：http://jsfiddle.net/skip405/NfeVh/4/。此代码适用于 IE7 及更高版本

如果 HTML 中的 inline-block 元素没有用空格分隔，则此解决方案将不起作用 - 请参阅示例 http://jsfiddle.net/NfeVh/1408/。当您使用 Javascript 插入内容时，可能会出现这种情况。

如果我们不关心 IE7，只需忽略 star-hack 属性。使用您的标记的工作示例在这里 - http://jsfiddle.net/skip405/NfeVh/5/。我刚刚添加了header:after 部分并证明了内容。

为了解决使用after 伪元素插入的额外空间的问题，可以将父元素的font-size 设置为0，然后将其重置为14px子元素。这个技巧的工作示例可以在这里看到：http://jsfiddle.net/skip405/NfeVh/326/

【讨论】：

有什么办法可以阻止横幅变高吗？我知道这是如何工作的，所以我认为没有。
如果您使用 javascript 生成内容，请注意，此解决方案仅在元素之间存在空格时才有效。您需要在左/右元素之间插入一个文本节点，否则它们都会粘在左边。
您是否介意将您的代码也粘贴到此处？到外部地方的链接有在某个时候死掉的习惯，如果发生这种情况，这个原本有用的答案就会突然变得毫无用处。
@ValerioColtrè 我同意空白是这种方法中最（也可能是唯一！）令人讨厌的地方。显式管理您的font-size 是相当不可取的。我提出了一个不同的解决方案。注意.header:after 装饰器增加了一行高度等于font-size。幸运的是，我们知道那是多少。正是1em！所以，negative margins 来救援！ This fiddle shows how.
@skip405 注意：将包装元素（标题）上的行高设置为 0 并修复它的伪元素的垂直对齐（例如，垂直对齐：顶部）可以解决额外空间问题.当然，我们必须重新设置父元素的行高，但在许多情况下会更容易。 jsfiddle.net/bencergazda/3gL8153n/7

【解决方案2】：

利用@skip405 的回答，我为它制作了一个Sass mixin：

@mixin inline-block-lr($container,$left,$right){
    #{$container}{        
        text-align: justify; 

        &:after{
            content: '';
            display: inline-block;
            width: 100%;
            height: 0;
            font-size:0;
            line-height:0;
        }
    }

    #{$left} {
        display: inline-block;
        vertical-align: middle; 
    }

    #{$right} {
        display: inline-block;
        vertical-align: middle; 
    }
}

它接受 3 个参数。容器，左右元素。例如，为了适合这个问题，您可以这样使用它：

@include inline-block-lr('header', 'h1', 'nav');

【讨论】：

【解决方案3】：

如果你不想使用浮动，你将不得不包装你的导航：

<header>
<h1>Title</h1>
<div id="navWrap">
<nav>
    <a>A Link</a>
    <a>Another Link</a>
    <a>A Third Link</a>
</nav>
</div>
</header>

...并添加一些更具体的 css：

header {
//text-align: center; // will set in js when the nav overflows (i think)
width:960px;/*Change as needed*/
height:75px;/*Change as needed*/
}

h1 {
display: inline-block;
margin-top: 0.321em;
}

#navWrap{
position:absolute;
top:50px; /*Change as needed*/
right:0;
}

nav {
display: inline-block;
vertical-align: baseline;
}

您可能需要做更多的事情，但这是一个开始。

【讨论】：

【解决方案4】：

两个元素都使用

display: inline-block;

'nav' 元素使用

float: right;

【讨论】：

对于浮动，不能使用换行。

【解决方案5】：

右对齐项目的新方法：

Grid:

.header {
        display:grid;
        grid-template-columns: 1fr auto;
    }

Demo

Bootstrap 4. Align right:

<div class="row">
      <div class="col">left</div>
      <div class="col">
          <div class="float-right">element needs to be right aligned</div>
      </div>
</div>

Demo

【讨论】：

【解决方案6】：

如果您在屏幕太小时（根据您对标题的评论）已经在使用 JavaScript 将内容居中，为什么不使用 JavaScript 撤消浮动/边距并正常使用浮动和边距.

您甚至可以使用 CSS 媒体查询来减少 JavaScript 的使用量。

【讨论】：

我想我还没有真正考虑过，只是看起来这样会更容易。但显然不是。关于如何从 javascript 跳转到下一行的导航的任何提示？
啊，我可以为此使用媒体查询！我以为那些只在启动时使用，而不是在调整大小时使用。谢谢。

【解决方案7】：

我认为一种可能的解决方案是使用display: table:

.header {
  display: table;
  width: 100%;
  box-sizing: border-box;
}

.header > * {
  display: table-cell;
}

.header > *:last-child {
  text-align: right;  
}

h1 {
  font-size: 32px;
}

nav {
  vertical-align: baseline;
}

JSFiddle：http://jsfiddle.net/yxxrnn7j/1/

【讨论】：

【解决方案8】：

给它 float: right 和 h1 float:left 并在它们之后放置一个带有 clear:both 的元素。

【讨论】：

"我不想使用花车"
@powerbuoy 有趣的是，他最后选择了带有浮动的解决方案，对吧？
@Italy：只是因为我认为这是唯一可能的方法——我改变了我接受的答案。

【解决方案9】：

显示父母的左中和右。如果您有 3 个以上的元素，请为它们使用 nth-child()。

HTML 示例：

<body>
    <ul class="nav-tabs">
        <li><a  id="btn-tab-business" class="btn-tab nav-tab-selected"  onclick="openTab('business','btn-tab-business')"><i class="fas fa-th"></i>Business</a></li>
        <li><a  id="btn-tab-expertise" class="btn-tab" onclick="openTab('expertise', 'btn-tab-expertise')"><i class="fas fa-th"></i>Expertise</a></li>
        <li><a  id="btn-tab-quality" class="btn-tab" onclick="openTab('quality', 'btn-tab-quality')"><i class="fas fa-th"></i>Quality</a></li>
    </ul>
</body>

CSS 示例：

.nav-tabs{
  position: relative;
  padding-bottom: 50px;
}

.nav-tabs li {
  display: inline-block;  
  position: absolute;
  list-style: none;
}
.nav-tabs li:first-child{
  top: 0px;
  left: 0px;
}
.nav-tabs li:last-child{
  top: 0px;
  right: 0px;
}
.nav-tabs li:nth-child(2){
  top: 0px;
  left: 50%;
  transform: translate(-50%, 0%);
}

【讨论】：