एक ही लाइन पर बाएँ और दाएँ दो इनलाइन-ब्लॉक संरेखित करें

Question

मैं दो इनलाइन-ब्लॉकों को कैसे संरेखित कर सकता हूं ताकि एक छोड़ दिया जाए और दूसरा उसी रेखा पर सही हो? यह इतना मुश्किल क्यों है? क्या LaTeX के \ hfill जैसा कुछ है जो इसे प्राप्त करने के लिए उनके बीच की जगह का उपभोग कर सकता है?

मैं झांकियों का उपयोग नहीं करना चाहता क्योंकि इनलाइन-ब्लॉक्स के साथ मैं आधार रेखाएँ बना सकता हूँ। और जब विंडो इन दोनों के लिए बहुत छोटा है, इनलाइन-ब्लॉक के साथ मैं सिर्फ टेक्स्ट-संरेखण को केंद्र में बदल सकता हूं और वे एक दूसरे के ऊपर केंद्रित होंगे। रिलेटिव (पैरेंट) + एब्सोल्यूट (एलिमेंट) पोजिशनिंग में उतनी ही समस्याएं होती हैं जितनी कि फ्लोट्स में होती हैं।

HTML5:

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

सीएसएस:

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're एक दूसरे के ठीक बगल में, लेकिन मैं navदाईं ओर चाहता हूं ।

Comments

AFAIK इसे हल करने का एकमात्र तरीका तैरने या पूर्ण स्थिति का उपयोग करना है। आप नौसेना पर मार्जिन-टॉप का उपयोग करके उसी आधारभूत स्थिति को प्राप्त कर सकते हैं।

— पॉवरबॉय

बस मार्जिन-टॉप और फ्लोट्स का उपयोग करें। यह उस या पूर्ण स्थिति के बिना करना संभव नहीं है।

— jdhartley

व्यूपोर्ट के आकार के आधार पर सीएसएस को बदलने के लिए सीएसएस मीडिया क्वेरी का उपयोग करें। आप दोनों का उपयोग कर सकते position: absoluteहैं औरinline-block

— elclanrs

Answer 1

संपादित करें: इस प्रश्न का उत्तर दिए 3 साल बीत चुके हैं और मुझे लगता है कि एक अधिक आधुनिक समाधान की आवश्यकता है, हालांकि वर्तमान एक बात करता है :)

1. फ्लेक्सबॉक्स

यह अब तक का सबसे छोटा और सबसे लचीला है। display: flex;मूल कंटेनर पर लागू करें और justify-content: space-between;इस तरह से अपने बच्चों के स्थान को समायोजित करें:

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

यहाँ ऑनलाइन देखा जा सकता है - http://jsfiddle.net/skip405/NfeVh/1073/

ध्यान दें कि फ्लेक्सबॉक्स समर्थन 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/ । यह एक ऐसा मामला हो सकता है जब आप जावास्क्रिप्ट के साथ सामग्री डालें।

अगर हम IE7 के बारे में परवाह नहीं करते हैं तो बस स्टार-हैक गुणों को छोड़ दें। आपके मार्कअप का उपयोग करके काम करने वाला उदाहरण यहां है - http://jsfiddle.net/skip405/NfeVh/5/ । मैंने सिर्फ header:afterभाग जोड़ा और सामग्री को सही ठहराया।

afterछद्म तत्व के साथ डाली गई अतिरिक्त जगह के मुद्दे को हल font-sizeकरने के लिए, मूल तत्व के लिए सेटिंग को 0 पर सेट करने और बच्चे के तत्वों के लिए 14px कहने के लिए इसे रीसेट करने की एक चाल चल सकती है । इस ट्रिक का काम करने वाला उदाहरण यहाँ देखा जा सकता है: http://jsfiddle.net/skip405/NfeVh/326/

Comments

हालांकि बैनर को लंबा बनाने से रोकने का कोई तरीका है? मुझे एहसास है कि यह कैसे काम कर रहा है, इसलिए मुझे लगता है कि वहाँ नहीं है।

— mk12

यदि आप जावास्क्रिप्ट के साथ अपनी सामग्री उत्पन्न कर रहे हैं, तो ध्यान दें कि यह समाधान केवल तभी काम करता है जब तत्वों के बीच व्हाट्सएप हो। आपको बाएँ / दाएँ तत्वों के बीच एक पाठ नोड सम्मिलित करने की आवश्यकता होगी या वे दोनों बाईं ओर चिपके रहेंगे।

— स्टीफन नेल्सन

क्या आप यहां अपना कोड पेस्ट करना चाहेंगे? बाहरी स्थानों के लिंक को किसी बिंदु पर मरने की आदत है, और यदि ऐसा होता है, तो यह अन्यथा उपयोगी उत्तर अचानक बेकार हो जाएगा।

— या मैपर

@ ValerioColtrè मैं इस बात से सहमत हूं कि खाली जगह इस दृष्टिकोण के बारे में सबसे अधिक (और संभवतः, केवल!) कष्टप्रद बात है। स्पष्ट रूप से अपने प्रबंधन के font-sizeबजाय अवांछनीय है। मैं एक अलग समाधान प्रस्तावित करता हूं। ध्यान दें कि .header:afterडेकोरेटर ऊंचाई के बराबर एक पंक्ति जोड़ता है font-size। सौभाग्य से हम जानते हैं कि कितना है। बिलकुल है 1em! तो, बचाव के लिए नकारात्मक मार्जिन ! यह फिडल दिखाता है कि कैसे ।

— डोमी

@ स्किप 405 नोट: रैपर एलीमेंट (हेडर) पर लाइन की ऊँचाई को 0 पर सेट करना और इसके छद्म एलिमेंट (वर्टिकल-अलाइन: टॉप, कहते हैं) के वर्टिकल-अलाइनमेंट को फिक्स करना अतिरिक्त स्पेस की समस्या को ठीक कर सकता है। हमें निश्चित रूप से मूल तत्वों पर लाइन-ऊंचाई को फिर से निर्धारित करना है, लेकिन यह कई मामलों में आसान हो सकता है। jsfiddle.net/bencergazda/3gL8153n/7

— bencergazda

Answer 2

@ स्किप 405 के उत्तर का लाभ उठाते हुए, मैंने इसके लिए एक सैस मिक्सिन बनाया है:

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

... और कुछ और विशिष्ट सीएसएस जोड़ें:

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

यदि आप स्क्रीन के बहुत कम होने पर जावास्क्रिप्ट का उपयोग पहले ही कर रहे हैं, तो स्क्रीन बहुत छोटी है (आपके हेडर के लिए आपकी टिप्पणी के अनुसार), आप जावास्क्रिप्ट को हाशिए पर नहीं रखते हैं, जबकि आप इसके साथ हैं और सामान्य रूप से फ्लोट और मार्जिन का उपयोग करते हैं।

आप जिस जावास्क्रिप्ट का उपयोग कर रहे हैं, उसे कम करने के लिए आप सीएसएस मीडिया क्वेरी का भी उपयोग कर सकते हैं।

Comments

मुझे लगता है कि मैं वास्तव में उस बारे में अभी तक नहीं सोच रहा था, ऐसा लग रहा था कि यह इस तरह से आसान होगा। लेकिन स्पष्ट रूप से नहीं। किसी भी संकेत के रूप में कि मैं जावास्क्रिप्ट से अगली पंक्ति में कूदने वाले नौसिखियों में कैसे हुक करूंगा?

— mk12

आह, मैं इसके लिए मीडिया प्रश्नों का उपयोग कर सकता हूं! मैंने सोचा कि उन का उपयोग केवल स्टार्टअप पर किया गया था, आकार बदलने पर नहीं। धन्यवाद।

— mk12

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

आइटम सही संरेखित करने के नए तरीके:

ग्रिड :

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

डेमो

बूटस्ट्रैप 4. सही संरेखित करें :

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

डेमो

Answer 7

माता-पिता के बाएं मध्य और दाईं ओर प्रदर्शित करना। यदि आपके पास अधिक है तो 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>

सीएसएस नमूना:

.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 8

इसे फ्लोट दें: दाएं और एच 1 फ्लोट: बाएं और स्पष्ट के साथ एक तत्व डालें: उनके बाद दोनों।

Comments

" मैं झांकियों का उपयोग नहीं करना चाहता "

— पावरबॉय

@powerbuoy अजीब बात है कि उसने आखिर में फ्लोट के साथ समाधान का चयन किया, है ना?

— इटाए मोव -मालिमोवका

@ इटली: केवल इसलिए कि मुझे लगा कि यह एकमात्र संभव तरीका है- मैंने अपना स्वीकृत उत्तर बदल दिया है।

— mk12

Answer 9

दोनों तत्वों के लिए उपयोग करें

display: inline-block;

'नव' तत्व के उपयोग के लिए

float: right;

Comments

फ्लोट के लिए किसी भी लपेट का उपयोग नहीं किया जा सकता है।

— इवगेन नेदा