İki satır içi bloğu aynı satır üzerinde sola ve sağa hizalayın

İki satır içi bloğu nasıl hizalayabilirim ki biri solda, diğeri sağda aynı satırda olacak şekilde? Bu neden bu kadar zor? Bunu başarmak için aralarındaki boşluğu tüketebilecek LaTeX'in dolgusu gibi bir şey var mı?

Yüzer sayı kullanmak istemiyorum çünkü satır içi bloklarla taban çizgilerini sıralayabilirim. Ve pencere her ikisi için çok küçük olduğunda, satır içi bloklarla metin hizalamasını merkeze değiştirebilirim ve bunlar birbirinin üzerine ortalanır. Göreli (üst) + Mutlak (öğe) konumlandırma, kayan konumların yaptığı gibi aynı sorunlara sahiptir.

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

Birbirlerinin yanıbaşındalar, ama ben navsağda olmasını istiyorum .

Düzenleme: Bu soruyu cevapladığımdan bu yana 3 yıl geçti ve sanırım daha modern bir çözüme ihtiyaç var, mevcut olanı yapsa da :)

1. Flexbox

Açık farkla en kısa ve en esnek olanıdır. display: flex;Üst kapsayıcıya uygulayın ve alt öğelerinin yerleşimini şu şekilde ayarlayın justify-content: space-between;:

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

Çevrimiçi olarak buradan görülebilir - http://jsfiddle.net/skip405/NfeVh/1073/

Bununla birlikte, flexbox desteğinin IE10 ve daha yeni olduğunu unutmayın. IE 9 veya daha eski sürümleri desteklemeniz gerekiyorsa aşağıdaki çözümü kullanın:

2. text-align: justifyTekniği burada kullanabilirsiniz .

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

Çalışma örneği burada görülebilir: http://jsfiddle.net/skip405/NfeVh/4/ . Bu kod, IE7 ve üstünden çalışır

HTML'deki satır içi blok öğeler boşlukla ayrılmamışsa, bu çözüm işe yaramaz - bkz. Örnek http://jsfiddle.net/NfeVh/1408/ . Javascript ile içerik eklediğinizde bu bir durum olabilir.

IE7'yi umursamıyorsak, basitçe star-hack özelliklerini atlayın. İşaretlemenizi kullanan çalışma örneği burada - http://jsfiddle.net/skip405/NfeVh/5/ . Sadece header:afterparçayı ekledim ve içeriği gerekçelendirdim.

afterSözde eleman ile eklenen fazladan boşluk sorununu çözmek font-sizeiçin, ana eleman için 0'ı ayarlama ve alt elemanlar için 14px demek için geri sıfırlama gibi bir hile yapılabilir . Bu numaranın çalışan örneği burada görülebilir: http://jsfiddle.net/skip405/NfeVh/326/

@ Skip405'in cevabından yararlanarak, bunun için bir Sass karışımı yaptım:

@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 parametre kabul eder. Kap, sol ve sağ eleman. Örneğin, soruya uyması için şu şekilde kullanabilirsiniz:

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

Şamandıra kullanmak istemiyorsanız, gezinme bölümünüzü kaydırmanız gerekecek:

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

... ve biraz daha spesifik css ekleyin:

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

Biraz daha yapman gerekebilir ama bu bir başlangıç.

Ekran çok küçükken işleri ortalamak için JavaScript kullanıyorsanız (başlığınıza ilişkin yorumunuza göre), neden JavaScript ile kayan / kenar boşluklarını geri almayasınız ve kayan ve kenar boşluklarını normal şekilde kullanmayasınız.

Hatta kullandığınız JavaScript miktarını azaltmak için CSS medya sorgularını bile kullanabilirsiniz.

Sanırım buna olası bir çözüm kullanmak 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/

Öğeleri doğru hizalamanın yeni yolları:

Izgara :

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

gösteri

Bootstrap 4. Sağa hizala :

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

gösteri

Orada ebeveynlerin sol orta ve sağında gösteriliyor. 3 öğeden daha fazlasına sahipseniz, onlar için nth-child () kullanın.

HTML örneği:

<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 örneği:

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

float: right ve h1 float: left verin ve clear: ikisinin arkasına bir eleman koyun.

Her iki öğe için de kullanın

display: inline-block;

'nav' öğesi kullanımı için

float: right;