Question

如何对齐两个内联块，使一个在左边，另一个在同一条线上？为什么这么难？是否有类似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。

a diagram

Answer 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/

Answer 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');

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

您可能需要多做一点，但这是一个开始。

Answer 4

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

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

Answer 5

我认为一个可能的解决方案是使用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/

Answer 6

对于这两个元素，请使用

display: inline-block;

用于＆＃39;导航＆＃39;元素使用

float: right;

Answer 7

正确对齐项目的新方法：

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

Answer 8

显示那里父母的左中和右。如果您有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%);
}

Answer 9

给它浮动：向右，并且h1浮动：向左并放置一个带有clear的元素：两者都在它们之后。

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

9 个答案: