mk12
그는 물었다 8년 전
97

왼쪽 및 오른쪽 동일한 행에 두 인라인 블록 맞추십시오.

바로 왼쪽, 다른 하나는 두 인라인 블록 도왔으매 맞추십시오 어떻게 같은 줄에? 그 이유는 열심히 해? # 39 의 \hfill 소비할 수 있는 공간을 같은 게 있나 LaTeX& 그들 사이에 이를 위해서는?

, T # 39 함께 사용할 수 있기 때문에 나는 내가 don& 유동합니다 인라인 블록 baselines (line up. 언제 내가 할 수 있는 창이 너무 작아 둘 다 그냥 그들은 불지옥으 atop 중심으로 한 가운데로 텍스트 정렬 변경하십시오 인라인 블록 다른 수. 상대 (부모) + (요소) 은 같은 문제들을 유동합니다 상대경로를 포지셔닝도 못하며창조된.

이 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& # 39, 바로 옆에 있는 '하고 서로 nav' 가 맞습니다.

a 구성도를!

powerbuoy
그는 8년 전 댓글을 달았습니다
1

아파이크 사용하는 것이 이 문제를 해결할 수 있는 유일한 방법은 유동합니다 또는 절대 포지셔닝하십시오. 같은 여백 가기 사용하여 포지셔닝하십시오 nav 의 기준선까지의 얻을 수 있습니다.

jdhartley
그는 8년 전 댓글을 달았습니다
0

여백 가기 및 유동합니다 됩니다. # 39 의 it& 않고 이 작업을 수행할 수 없는 그거거나 아니면 절대 포지셔닝하십시오.

elclanrs
그는 8년 전 댓글을 달았습니다
0

Css 를 사용하여 미디어 쿼리합니다 변경하십시오 css 의 크기에 따라 뷰포트가. 포지션 모두 사용할 수 있습니다. '절대' 와 '인라인 블록

답변 8 개

  • Edit:* 3 년이 지나도록 하도 답변됨 이 질문과 아마 내가 한 일을 할 수 있지만, 좀 더 현대적인 해법이 현재 높여줍니까:)

플렉상자 1.

39 의 최단 it& 지금까지 가장 유연하다. 적용하십시오 '디스플레이: flex, 부모 자식 '을 통해' 컨테이너 및 배치를 조정하십시오 맞춤 컨텐트: 공간 사이, '다음과 같습니다.

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

여기에 온라인으로 볼 수 있습니다 - http://jsfiddle.net/skip405/NfeVh/1073/

하지만 [플렉상자 지원] [2] 는 IE10 및 새로운. 인터넷 익스플로러 9 이상 지원할 수 있도록 하는 경우, 아래 해결책:

2.You '텍스트 정렬 사용할 수 있습니다. 균등 '기법을 삽입하십시오.

.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 요소 및 공간, 작업 - t # 39 분판된 않습니다를 won& 예 참조 (http://jsfiddle.net/NfeVh/1408/). 이 때 로켈이 Javascript 와 내용을 삽입하려면 될 수 있습니다.

만약 우리가 don& # 39, t care about IE7 이 단순히 생략하십시오 애제자지 해킹 이다. 이곳에서 일하는 수정표시 사용 예 - http://jsfiddle.net/skip405/NfeVh/5/. 이 후 '그냥' 헤더입니다 추가했어야 부품 및 자리맞춤 컨텐트입니다.:

문제의 해결을 위해 함께 할 수 있는 '한 뒤 추가 공간을 삽입되는' 의 '속임수' 0 으로 설정하면 dtep 요소점 font-size 부모에 대한 요소 및 재설정됨 14px 다시 말하도다 아이를 요소. 이 전략은 작업 예를 볼 수 있습니다. http://jsfiddle.net/skip405/NfeVh/326/

[2]: http://caniuse.com/ # 성과 = 플렉상자

Mateusz Wolniak
mk12
그는 8년 전 댓글을 달았습니다
1

길게 만들고 배너 표시되어도 에서 고만하세요 방법은 없나? 난 이 말이 어떻게 작동하는지, 그래서 꼭 이래야겠어요 solaris. 좁히어 isn& # 39, t.

Valerio
그는 7년 전 댓글을 달았습니다
0

이 솔루션은 매우 세련된 입력해도 it& # 39, s, t # 39, 추가 세로폭 그것은됐다 isn& 해결 방법이 없다. 이 문제를 해결할 수? 정확히 20 새롭게 쓸모 없는 픽셀입니다 :- (

  • 편집할지 *: 지정 가능한 해결 방법, 높이: 누mp스. 이는 아주 나쁜 컨테이너인 대한 여러 가지 이유로 인해.
Stephen Nelson
그는 7년 전 댓글을 달았습니다
1

39, 자바스크립트, 이는 you& 경우 내용을 재 생성 솔루션을 요소 사이의 공백을 경우에만 사용할 수 있다. 텍스트 노드입니다 삽입하려면 합니다 이 두 가지 요소 사이의 왼쪽 / 오른쪽 또는 왼쪽 일이다.

skip405
그는 7년 전 댓글을 달았습니다
0

@Valerio Coltr& 232;, 찾았다고 해결하십시오 이 약간의 문제가 아니다. 만약 우리가 실제로 추가 공간이 사라지는 세트 'font-size: 1px '부모 컨테이너입니다. 우리는 이제 겨우 '등의 하위 요소가 정상으로 돌아 font-size 설정할 수 있습니다. http://jsfiddle.net/skip405/NfeVh/326/

O. R. Mapper
그는 7년 전 댓글을 달았습니다
1

여기에 붙여넣으려면 투석실에다가 마음을 코드에 아니라? 외부 링크 곳에는 아웃하기로 신들은 죽을 게 습관이 어떤 점에서 그렇게 되면 갑자기 유용한 오토메이티드 무용지물이 될 것이다.

Domi
그는 6년 전 댓글을 달았습니다
5

@Valeriocoltr& 232. I agree 빈 공간이 있는 가장 (되며, 오직!) 귀찮은 일은 우리 섹스한거요 외곽진입. Font-size '오히려' 직접 관리하는 것은 바람직하지 않다고 말했습니다. 내가 다른 해결책을 제안하십시오. 참고로, '같음' font-size '높이' 한 줄로 .header:after 자도으로 디자이너이다. 다행히도 우리가 아는 것도 별로. 1em 것은 '정확히'! 따라서 [제외어 여유폭] (http://www.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/) 를 구조! [이 바이올린 [email protected] 어떻게] (http://jsfiddle.net/NfeVh/792/).

Graham Lea
그는 5년 전 댓글을 달았습니다
0

39 m, Firefox 와 비슷한 일을 하는 i& it& # 39 의 작동안함. 두 가지 발생하는 봐요. 1. # 39, t isn& 아닌 올바른 CSS 선택기를 이후 이후? 2. 이 이후 선택기를 content 삽입물의 꽂으십시오 페이지이므로 요소점과 아닙니다. # 39 에 때 아닌 설정할 수 있는 방법은 너비입니다 컨텐트입니다 it& 요소점? 어쨌든, 일하는 것 같다, 그러나 일부 I& # 39 m 혼란스럽다.

Graham Lea
그는 5년 전 댓글을 달았습니다
0

모든 브라우저 敲阀汽俊 汲摹窍妨绰 &quot, 이중 콜론 (::) CSS3 는 단순히 구문 (:) 하지만, IE 8 만 구문을 up1 single-colon&quot. https://css-tricks.com/almanac/selectors/a/after-and-before/

bencergazda
그는 4년 전 댓글을 달았습니다
1

@skip405 참고: 선 높이 설정 및 해결을 위해 0 의 래퍼 요소 (헤더입니다) 의 vertical alignment it& # 39 의 dtep 요소 (수직 정렬: 위쪽, 말하도다) 추가 공간을 문제를 해결할 수 있습니다. 물론, 우리는 이 라인 높이 다시 놓기 상위 요소, 하지만 쉽게 할 수 있는 경우가 많다. http://jsfiddle.net/bencergazda/3gL8153n/7/

skip405
그는 4년 전 댓글을 달았습니다
0

@bencergazda, 준활성, 감사합니다:)

Jan Papenbrock
그는 4년 전 댓글을 달았습니다
0

만약 내가 읽고 싶은 @skip405 하위 항목 모두 같은 컨트롤러상의 정렬되고 기준선까지의 질문에 올바르게, OP. 어쩌면 당신은 이 추가 고려해야 할 데이터베이스에구성원을 답? 바이올린 한 넣을 수 있습니다. http://jsfiddle.net/c4pwtn5o/ - it 는 기본적으로 '추가 항목에서와 맞추십시오.: ',' 을 기준선까지의 그레이더 '.

skip405
그는 4년 전 댓글을 달았습니다
0

@JanPapenbrock 제안, 함께 해 주셔서 감사합니다. # 39 의 이미지를 볼 수 있는 요소는 않니다 OP& 같은 컨트롤러상의 요구한다. 그러나 질문 자체에 대한 수직 맞춤에는 않았다. 편집 거절됨 아닌 나를 통해 브트와)

skip405
그는 4년 전 댓글을 달았습니다
0

더 그 상태를 @janpapenbrock '이경규 김용만의 라인업' OP 매우 명확한 baselines 수 있습니다. 왜 당신 오토메이티드 거부됩니다 편집이 가능합니까? 아니 위반?

Jan Papenbrock
그는 4년 전 댓글을 달았습니다
0

39 m 이 개선, 아니 개인적으로 i& 첨부됩니다; -) 에서 찾을 수 있는 내 자신을 그냥 조정해야 하는 리스토어와 기준선까지의 question& # 39 의 이미지 생각해봤죠 OPs, 필요한 것은 잘 알려져 있다. 그래서 또 좋을 것 같아. 거부 이유는 이 동네 사람들은 전송되었기 편집 및 관련 문제가 양식 (있어야 한다고 편집됩니다 대신) 보다는 컨텐트입니다.

39 라고 I& @skip405& 활용하여, ve, s # 39 한 자스 믹스인 for it.

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

39 don& 사용할 경우, t, you& 유동합니다 # 39 랩 너회의 탐색, re 할 것입니다.

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

좀 더 구체적인 추가 .and 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;
}

39 의 작업을 수행해야 할 수 있습니다, 하지만 조금 더 that& 시작.

제가 생각하는 이 가능한 솔루션을 사용할 수 있습니다 '디스플레이: 표 ':

<! - 언어: css - &gt.

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

이스피들: http://jsfiddle.net/yxxrnn7j/1/

39, re 때 JavaScript 를 사용하여 물건을 가운데 이미 you& 경우 화면이 너무 작다 (사용자 의견에 따라 단축시킵니다 헤더입니다), 왜안돼요 명령취소 유동합니다 JavaScript 와 동시에 그것을 보면서 그냥 # 39, re / 여유폭 you& 유동합니다 정상적으로 사용 및 여유폭.

Css, JavaScript 를 사용할 수도 줄일 수 있는 미디어 쿼리합니다 you& # 39 재 사용 중.

jdhartley
mk12
그는 8년 전 댓글을 달았습니다
0

39 wasn& 생각하고 있는 것 같다, t really like it this way 간소화하는지 아직말이에요, 그냥 될 것 같다. 하지만 분명히 모든 방법과 힌트를 꼭 이래야겠어요 훅 꽂으십시오 nav 제대로 안 돼 다음 줄로 javascript 에서?

mk12
그는 8년 전 댓글을 달았습니다
0

아, 내가 이 미디어 쿼리합니다 사용할 수 있습니다! 이러한 디렉토리에만 생각해봤죠 시작할 때 사용된 아닌 크기조정할. 감사합니다.

새로운 방법을 항목에서와 정렬하려면 오른쪽:

격자선:

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

데모

[부트스트랩에 4. 오른쪽 정렬] [3]:

<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]: https://getbootstrap.com/docs/4.1/utilities/float/ # 응답성의

요소를 모두 사용

display: inline-block;

39, & # 39 대한 nav&. 요소점 사용

float: right;

Sammy Aguns
Ievgen Naida
그는 2년 전 댓글을 달았습니다
2

부동 소수점 한 줄로 위해 사용할 수 없습니다.

give it float: 그리고, 그 안에 포함된 요소를 모두 오른쪽 및 왼쪽 선택해제합니다 저들이요 후 h1 float::

powerbuoy
그는 8년 전 댓글을 달았습니다
8

, t want to use floats*&quo &quot 내가 don& # 39;;

Itay Moav -Malimovka
그는 8년 전 댓글을 달았습니다
0

그는 결국 선택한 솔루션을 통해 재미있는 @powerbuoy 유동합니다 맞죠?

mk12
그는 8년 전 댓글을 달았습니다
0

@Italy: 단지 내 수락됨 오토메이티드 가능한 유일한 생각해봤죠 전송되었기 방법-i 변경되었습니다.