จัดแนวบล็อกแบบอินไลน์สองบล็อกซ้ายและขวาในบรรทัดเดียวกัน

ฉันจะจัดเรียงบล็อกแบบอินไลน์สองบล็อกเพื่อให้บล็อกหนึ่งอยู่ทางซ้ายและอีกอันอยู่ในบรรทัดเดียวกันได้อย่างไร ทำไมถึงยากขนาดนี้? มีบางอย่างเช่น \ hfill ของ LaTeX ที่สามารถใช้ช่องว่างระหว่างพวกเขาเพื่อให้บรรลุสิ่งนี้หรือไม่?

ฉันไม่ต้องการใช้โฟลทเพราะด้วยอินไลน์บล็อกฉันสามารถจัดแนวเส้นฐานได้ และเมื่อหน้าต่างมีขนาดเล็กเกินไปสำหรับทั้งคู่ด้วยบล็อกแบบอินไลน์ฉันสามารถเปลี่ยนการจัดแนวข้อความเป็นกึ่งกลางได้ การวางตำแหน่งสัมพัทธ์ (พาเรนต์) + ค่าสัมบูรณ์ (องค์ประกอบ) มีปัญหาเช่นเดียวกับการลอยตัว

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

พวกเขาอยู่ติดกัน แต่ฉันต้องการnavทางขวา

แก้ไข: 3 ปีผ่านไปนับตั้งแต่ที่ฉันตอบคำถามนี้และฉันคิดว่าจำเป็นต้องมีวิธีแก้ปัญหาที่ทันสมัยกว่านี้แม้ว่าคนปัจจุบันจะทำสิ่งนั้นก็ตาม :)

1. Flexbox

มันสั้นที่สุดและยืดหยุ่นที่สุด นำdisplay: flex;ไปใช้กับคอนเทนเนอร์หลักและปรับตำแหน่งของลูกโดยทำjustify-content: space-between;ดังนี้:

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

สามารถดูออนไลน์ได้ที่นี่ - http://jsfiddle.net/skip405/NfeVh/1073/

อย่างไรก็ตามโปรดทราบว่าการรองรับ flexboxคือ 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/ กรณีนี้อาจเกิดขึ้นเมื่อคุณแทรกเนื้อหาด้วย Javascript

หากเราไม่สนใจ IE7 เพียงแค่ละเว้นคุณสมบัติ star-hack ตัวอย่างการทำงานโดยใช้มาร์กอัปของคุณอยู่ที่นี่ - http://jsfiddle.net/skip405/NfeVh/5/ ฉันเพิ่งเพิ่มheader:afterส่วนและปรับเนื้อหาให้เหมาะสม

เพื่อแก้ปัญหาของพื้นที่พิเศษที่แทรกด้วยafterองค์ประกอบหลอกเราสามารถทำเคล็ดลับในการตั้งค่าเป็นfont-size0 สำหรับองค์ประกอบหลักและรีเซ็ตกลับเป็น 14px สำหรับองค์ประกอบลูก ตัวอย่างการทำงานของเคล็ดลับนี้สามารถดูได้ที่นี่: http://jsfiddle.net/skip405/NfeVh/326/

ใช้ประโยชน์จากคำตอบของ @ 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');

หากคุณไม่ต้องการใช้โฟลตคุณจะต้องปิด nav ของคุณ:

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

คุณอาจต้องทำเพิ่มอีกเล็กน้อย แต่นั่นเป็นการเริ่มต้น

หากคุณใช้ JavaScript เพื่อจัดกึ่งกลางเมื่อหน้าจอมีขนาดเล็กเกินไป (ตามความคิดเห็นของคุณสำหรับส่วนหัวของคุณ) ทำไมไม่เพียงแค่เลิกทำการลอย / ระยะขอบด้วย JavaScript ในขณะที่คุณอยู่ที่หน้าจอและใช้การลอยและระยะขอบตามปกติ

คุณยังสามารถใช้คิวรีสื่อ CSS เพื่อลดจำนวน JavaScript ที่คุณใช้

ฉันคิดว่าทางออกหนึ่งที่เป็นไปได้คือการใช้ 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/

วิธีใหม่ในการจัดแนวรายการให้ถูกต้อง:

กริด :

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

การสาธิต

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

การสาธิต

แสดงด้านซ้ายตรงกลางและด้านขวาของผู้ปกครอง หากคุณมีมากกว่า 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%);
}

ให้มันลอย: ขวาและลอย h1: ซ้ายและใส่องค์ประกอบที่ชัดเจน: ทั้งสองตามหลัง

สำหรับทั้งสององค์ประกอบให้ใช้

display: inline-block;

สำหรับการใช้องค์ประกอบ "nav"

float: right;