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

113

如何对齐两个内联块，以便一个在左边，另一个在同一行？为什么这么难？是否有类似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;
}

Thery彼此相邻，但我希望nav右侧。

一个图

css  html 
— mk12
source
1
AFAIK解决此问题的唯一方法是使用浮动或绝对定位。您可以使用导航上的margin-top获得相同的基线位置。
— powerbuoy 2012年
只需使用margin-top和float。没有那种定位或绝对定位，就不可能做到这一点。
— jdhartley
使用css媒体查询可根据视口的大小更改css。您可以同时使用position: absoluteinline-block
— elclanrs 2012年

Answers:

147

编辑：自从我回答了这个问题以来已经过去了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/。当您使用Java脚本插入内容时，可能是这种情况。

如果我们不在乎IE7，则只需省略star-hack属性。使用标记的工作示例在此处-http://jsfiddle.net/skip405/NfeVh/5/。我只是添加了header:after一部分并证明了内容的合理性。

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

— 跳过405
source
1
有什么方法可以阻止它把横幅提高得更高吗？我意识到这是如何工作的，所以我认为没有用。
— mk12 2012年
1
如果您使用javascript生成内容，请注意，仅当元素之间存在空格时，此解决方案才有效。您将需要在左/右元素之间插入一个文本节点，否则它们都将粘在左边。
— 斯蒂芬·尼尔森
1
您还可以将代码粘贴到这里吗？链接到外部场所的习惯有时会死掉，如果发生这种情况，那么本来有用的答案将突然变得无用。
— OR Mapper
5
@ValerioColtrè我同意这种方法最令人讨厌的地方是空白。明确管理您的工作font-size是不可取的。我提出了另一种解决方案。请注意，.header:after装饰器将添加一行等于的高度font-size。幸运的是，我们知道那是多少。就是这样1em！因此，负利润可助您一臂之力！这个小提琴展示了如何。
— 米（Domi）2014年
1
@ skip405注意：将包装元素（标题）上的行高设置为0并修复其伪元素的垂直对齐方式（vertical-align：top，例如）可以解决额外的空间问题。当然，我们必须在父元素上重新设置行高，但是在许多情况下它可以更容易些。jsfiddle.net/bencergazda/3gL8153n/7
— bencergazda
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');
— 巴勃罗·SG·帕切科
source
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
source
1

如果您已经在屏幕过小时（根据标题的注释）使用JavaScript来使内容居中，那为什么不只是在使用JavaScript时撤消浮点数/边距，然后正常使用浮点数和边距。

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

— 贾德利
source
我想我还没有真正考虑这一点，似乎这样会更容易。但显然不是。关于我如何从javascript跳转到下一行的导航的任何提示？
— mk12 2012年
啊，我可以使用媒体查询！我认为这些仅用于启动，而不用于调整大小。谢谢。
— mk12 2012年
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/

— 抢劫
source
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%);
}
— 主
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.