Sejajarkan dua blok sebaris ke kiri dan kanan pada baris yang sama

Bagaimana saya bisa menyelaraskan dua blok sebaris sehingga yang satu berada di kiri dan yang lainnya tepat di baris yang sama? Mengapa ini sangat sulit? Apakah ada sesuatu seperti \ hfill LaTeX yang dapat menghabiskan ruang di antara mereka untuk mencapai ini?

Saya tidak ingin menggunakan pelampung karena dengan blok-sebaris saya bisa berbaris dasar. Dan ketika jendela terlalu kecil untuk keduanya, dengan blok-sebaris saya bisa mengubah perataan teks ke tengah dan mereka akan dipusatkan satu sama lain. Relatif (induk) + Pemosisian absolut (elemen) memiliki masalah yang sama seperti float.

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

Mereka berada tepat di samping satu sama lain, tetapi saya ingin yang navdi kanan.

Sunting: 3 tahun telah berlalu sejak saya menjawab pertanyaan ini dan saya kira solusi yang lebih modern diperlukan, meskipun yang sekarang melakukan hal itu :)

1. Flexbox

Sejauh ini, ini yang terpendek dan paling fleksibel. Terapkan display: flex;ke wadah induk dan sesuaikan penempatan anaknya dengan justify-content: space-between;seperti ini:

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

Dapat dilihat secara online di sini - http://jsfiddle.net/skip405/NfeVh/1073/

Namun perlu diperhatikan bahwa dukungan flexbox adalah IE10 dan yang lebih baru. Jika Anda perlu mendukung IE 9 atau yang lebih lama, gunakan solusi berikut:

2. Anda dapat menggunakan text-align: justifyteknik ini di sini.

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

Contoh kerja dapat dilihat di sini: http://jsfiddle.net/skip405/NfeVh/4/ . Kode ini berfungsi dari IE7 ke atas

Jika elemen blok-sebaris di HTML tidak dipisahkan dengan spasi, solusi ini tidak akan berfungsi - lihat contoh http://jsfiddle.net/NfeVh/1408/ . Ini mungkin terjadi saat Anda memasukkan konten dengan Javascript.

Jika kita tidak peduli dengan IE7, cukup abaikan properti star-hack. Contoh kerja yang menggunakan markup Anda ada di sini - http://jsfiddle.net/skip405/NfeVh/5/ . Saya baru saja menambahkan header:afterbagian dan membenarkan isinya.

Untuk mengatasi masalah ruang ekstra yang disisipkan dengan afterpseudo-element, seseorang dapat melakukan trik untuk mengatur font-sizeke 0 untuk elemen induk dan mengatur ulang kembali menjadi 14px untuk elemen anak. Contoh kerja trik ini dapat dilihat di sini: http://jsfiddle.net/skip405/NfeVh/326/

Memanfaatkan jawaban @ skip405, saya telah membuat mixin Sass untuk itu:

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

Ini menerima 3 parameter. Kontainer, elemen kiri dan kanan. Misalnya, untuk menyesuaikan pertanyaan, Anda bisa menggunakannya seperti ini:

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

Jika Anda tidak ingin menggunakan pelampung, Anda harus membungkus navigasi Anda:

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

... dan tambahkan beberapa css yang lebih spesifik:

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

Anda mungkin perlu melakukan lebih banyak, tetapi itu adalah permulaan.

Jika Anda sudah menggunakan JavaScript untuk memusatkan barang ketika layar terlalu kecil (sesuai komentar Anda untuk tajuk Anda), mengapa tidak membatalkan float / margin dengan JavaScript saat Anda menggunakannya dan gunakan float dan margin secara normal.

Anda bahkan dapat menggunakan kueri media CSS untuk mengurangi jumlah JavaScript yang Anda gunakan.

Saya pikir satu solusi yang mungkin untuk ini adalah dengan menggunakan 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/

Cara baru untuk meratakan item dengan benar:

Kisi :

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

Demo

Bootstrap 4. Rata kanan :

<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

Menampilkan kiri tengah dan kanan ada orang tua. Jika Anda memiliki lebih dari 3 elemen maka gunakan nth-child () untuk mereka.

Contoh 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>

Contoh 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%);
}

berikan float: right dan h1 float: left dan letakkan elemen dengan clear: keduanya setelahnya.

Untuk penggunaan kedua elemen

display: inline-block;

untuk penggunaan elemen 'nav'

float: right;