Căn chỉnh hai khối nội tuyến trái và phải trên cùng một dòng

Làm cách nào để căn chỉnh hai khối nội tuyến sao cho khối bên trái và khối bên phải trên cùng một dòng? Tại sao nó lại khó thế này? Có thứ gì đó giống như \ hfill của LaTeX có thể tiêu tốn không gian giữa chúng để đạt được điều này không?

Tôi không muốn sử dụng float vì với khối nội tuyến, tôi có thể sắp xếp các đường cơ sở. Và khi cửa sổ quá nhỏ đối với cả hai, với các khối nội tuyến, tôi chỉ có thể thay đổi căn chỉnh văn bản thành căn giữa và chúng sẽ được căn giữa từng cái một. Định vị tương đối (cha) + Định vị (phần tử) tuyệt đối có những vấn đề giống như float.

HTML5:

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

Các 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 ở ngay cạnh nhau, nhưng tôi muốn navở bên phải.

Chỉnh sửa: Đã 3 năm trôi qua kể từ khi tôi trả lời câu hỏi này và tôi đoán cần có một giải pháp hiện đại hơn, mặc dù giải pháp hiện tại làm được điều đó :)

1. Flexbox

Nó cho đến nay là ngắn nhất và linh hoạt nhất. Áp dụng display: flex;cho vùng chứa chính và điều chỉnh vị trí của vùng chứa con của nó justify-content: space-between;như sau:

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

Có thể xem trực tuyến tại đây - http://jsfiddle.net/skip405/NfeVh/1073/

Tuy nhiên, lưu ý rằng hỗ trợ flexbox là IE10 và mới hơn. Nếu bạn cần hỗ trợ IE 9 trở lên, hãy sử dụng giải pháp sau:

2. bạn có thể sử dụng text-align: justifykỹ thuật ở đây.

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

Bạn có thể xem ví dụ làm việc tại đây: http://jsfiddle.net/skip405/NfeVh/4/ . Mã này hoạt động từ IE7 trở lên

Nếu các phần tử khối nội tuyến trong HTML không được phân tách bằng dấu cách, giải pháp này sẽ không hoạt động - hãy xem ví dụ http://jsfiddle.net/NfeVh/1408/ . Đây có thể là một trường hợp khi bạn chèn nội dung bằng Javascript.

Nếu chúng ta không quan tâm đến IE7, chỉ cần bỏ qua các thuộc tính hack sao. Ví dụ hoạt động bằng cách sử dụng đánh dấu của bạn ở đây - http://jsfiddle.net/skip405/NfeVh/5/ . Tôi chỉ thêm header:aftermột phần và giải thích nội dung.

Để giải quyết vấn đề về không gian thừa được chèn với afterphần tử giả, người ta có thể thực hiện một thủ thuật là đặt font-sizethành 0 cho phần tử mẹ và đặt lại nó thành 14px cho phần tử con. Ví dụ hoạt động của thủ thuật này có thể được xem tại đây: http://jsfiddle.net/skip405/NfeVh/326/

Tận dụng câu trả lời của @ ignore405, tôi đã tạo một bản mixin Sass cho nó:

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

Nó chấp nhận 3 tham số. Vùng chứa, phần tử bên trái và bên phải. Ví dụ: để phù hợp với câu hỏi, bạn có thể sử dụng nó như sau:

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

Nếu bạn không muốn sử dụng phao, bạn sẽ phải quấn điều hướng của mình:

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

... và thêm một số css cụ thể hơn:

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

Bạn có thể cần phải làm nhiều hơn một chút, nhưng đó là một sự khởi đầu.

Nếu bạn đã sử dụng JavaScript để căn giữa nội dung khi màn hình quá nhỏ (theo nhận xét của bạn cho tiêu đề của bạn), tại sao không chỉ hoàn tác phao / lề bằng JavaScript khi bạn đang ở đó và sử dụng phao và lề bình thường.

Bạn thậm chí có thể sử dụng các truy vấn phương tiện CSS để giảm lượng JavaScript bạn đang sử dụng.

Tôi nghĩ một giải pháp khả thi cho việc này là sử dụng 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/

Những cách mới để căn chỉnh các mục đúng:

Lưới :

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

Bản giới thiệu

Bootstrap 4. Căn phải :

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

Bản giới thiệu

Hiển thị bên trái giữa và bên phải của cha mẹ. Nếu bạn có nhiều hơn 3 phần tử thì hãy sử dụng nth-child () cho chúng.

Mẫu 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>

Mẫu 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%);
}

cho nó float: right và float h1: left và đặt một phần tử có clear: sau chúng.

Đối với cả hai yếu tố sử dụng

display: inline-block;

để sử dụng phần tử 'nav'

float: right;