在同一行上左右对齐两个内联块。

Question

在同一行上左右对齐两个内联块。

133

我该如何对齐两个内联块，使得一个在同一行的左侧，另一个在右侧？为什么这么难做？是否有类似于LaTeX的\hfill可以利用它们之间的空格来实现呢？

我不想使用浮动，因为使用内联块可以将基线对齐。当窗口过小以至于无法同时容纳两个内联块时，使用内联块可以将文本对齐方式更改为居中，它们就会在上下方向上居中对齐。相对（父级） + 绝对（元素）定位具有与浮动相同的问题。

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放在右边。

一个图表

- mk12

1

据我所知，解决这个问题的唯一方法是使用浮点数或绝对定位。您可以通过在导航上使用 margin-top 来实现相同的基线位置。 - powerbuoy

只需使用margin-top和floats。如果没有这个或绝对定位，就无法完成此操作。 - jdhartley

使用CSS媒体查询根据视口大小更改CSS。您可以同时使用position: absolute和inline-block。 - elclanrs

9个回答

7

对于这两个元素，请使用

display: inline-block;

float: right;

- Sammy Aguns

3

浮点数不能使用“no wrap”。 - Ievgen

根据浮动的特性，它会修改一些情况下的显示值的计算结果，例如：inline-block -> block。关于浮动的更多信息，请参考此链接。而Q代表的是inline-block。 - undefined

5

利用@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');

- Pablo S G Pacheco

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;
}

你可能需要做更多的工作，但这是一个开始。

- maiorano84

2

新的右对齐方式：

Grid布局： Grid

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

演示

Bootstrap 4. 对齐到右侧:

<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

- Ievgen

1

我认为解决这个问题的一种可能方法是使用 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/

JSFiddle：{{link1：http://jsfiddle.net/yxxrnn7j/1/}}

- robd

1

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

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

- jdhartley

我想我还没有真正考虑过那个问题，只是这样做似乎更容易。但显然不是这样的。有什么提示可以告诉我如何从JavaScript中连接到nav跳转到下一行呢？ - mk12

啊，我可以使用媒体查询来解决这个问题！我以为它们只能在启动时使用，而不是在调整大小时。谢谢。 - mk12

0

给它 float: right，h1 float:left，然后在它们之后放一个 clear:both 的元素。

- Itay Moav -Malimovka

9

我不想使用浮点数。 - powerbuoy

@powerbuoy很有趣，他选择了以浮点数结尾的解决方案，对吧？ - Itay Moav -Malimovka

@Italy：只是因为我认为那是唯一可能的方式，所以我改变了我接受的答案。 - mk12

0

显示父元素的左、中、右侧。如果您有超过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%);
}

- Rafiq

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- skip405 · Accepted Answer

编辑：自我回答这个问题已经过去3年了，我猜可能需要更现代的解决方案，尽管当前的解决方案也可以胜任 :)

1. Flexbox

这是目前最短、最灵活的方案。将display: flex;应用于父容器，并通过justify-content: space-between;调整其子项的位置，如下所示：

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

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

请注意，flexbox支持仅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中的内联块元素没有用空格分隔，此解决方案将无法正常工作 - 可以查看示例http://jsfiddle.net/NfeVh/1408/。这可能是在JavaScript中插入内容的情况。

如果我们不关心IE7，则可以省略星号hack属性。使用您的标记的工作示例在这里 - http://jsfiddle.net/skip405/NfeVh/5/。我只添加了header:after部分并对齐了内容。

为了解决由after伪元素插入的额外空间问题，可以通过将父元素的font-size设置为0，并将其重置为子元素的14px来进行技巧操作。这个技巧的有效示例可以在这里看到：http://jsfiddle.net/skip405/NfeVh/326/