두 개의 인라인 블록을 같은 줄에 왼쪽과 오른쪽으로 정렬

하나는 왼쪽에 있고 다른 하나는 같은 줄에 오른쪽에 있도록 두 개의 인라인 블록을 정렬하려면 어떻게해야합니까? 왜 그렇게 어렵습니까? 이것을 달성하기 위해 그들 사이의 공간을 소비 할 수있는 LaTeX의 \ hfill과 같은 것이 있습니까?

인라인 블록 을 사용 하면 기준선을 정렬 할 수 있기 때문에 수레를 사용하고 싶지 않습니다 . 그리고 창이 둘 다에 대해 너무 작을 때 인라인 블록을 사용하여 텍스트 정렬을 가운데로 변경할 수 있으며 서로 중앙에 배치됩니다. Relative (parent) + Absolute (element) 위치 지정에는 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;
}

Thery는 서로 옆에 있지만 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에 관심이 없다면 스타 해킹 속성을 생략하면됩니다. 마크 업을 사용하는 작업 예제는 여기에 있습니다 -http : //jsfiddle.net/skip405/NfeVh/5/ . 방금 header:after부품을 추가 하고 내용을 정당화했습니다.

after의사 요소로 삽입되는 추가 공간 문제를 해결하기 위해 font-size부모 요소에 대해을 0 으로 설정 하고 하위 요소에 대해 다시 14px로 재설정 하는 트릭을 수행 할 수 있습니다 . 이 트릭의 실제 예제는 http://jsfiddle.net/skip405/NfeVh/326/에서 볼 수 있습니다.

@ skip405의 답변을 활용하여 Sass 믹스 인을 만들었습니다.

@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');

플로트를 사용하지 않으려면 탐색을 래핑해야합니다.

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

데모

부트 스트랩 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%);
}

float : right 및 h1 float : left를 지정하고 clear : both 뒤에 요소를 넣습니다.

두 요소 모두 사용

display: inline-block;

'nav'요소 사용

float: right;