두 줄의 인라인 요소가 동일한 줄에 있는지 확인하는 방법

Question

뷰포트가 얼마나 좁아도 인라인 요소 두 개가 같은 줄에 있어야합니다. 입력 필드와 전송 버튼 내 경우

(만든이 하나 개의 긴 버튼을 같이하는 당신은으로 이메일을 넣어)

Answer 1

그들은 부모 요소에 싸여 될 필요가

:

.singleLineChildren { 
 
    /* prevents the contents from wrapping to a new line: */ 
 
    white-space: nowrap; 
 
    /* prevents the overflow being seen/scrolled-to; 
 
    adjust to taste: */ 
 
    overflow: hidden; 
 
    /* to emphasize/speed-up the effect: */ 
 
    width: 50%; 
 
    /* just for visibility: */ 
 
    box-shadow: 0 0 6px 4px #f90; 
 
} 
 

 
.singleLineChildren { 
 
    display: inline-block; 
 
    box-sizing: border-box; 
 
    /* purely so that narrowing the browser screen has 
 
    an obviously visible effect: */ 
 
    font-size: 4em; 
 
    min-width: 5em; 
 
    width: 50%; 
 
}

<div class="singleLineChildren"> 
 
    <a href="#">Link 1</a> 
 
    <a href="#">Link 2</a> 
 
</div>

Answer 2

당신이 시도 할 수 있습니다 :

div { 
 
    padding:5px; 
 
    } 
 
.father { 
 
    display: block; 
 
    } 
 
.child { 
 
    display:inline-block; 
 
    } 
 
.red { 
 
    background: red; 
 
    color:white; 
 
    } 
 
.blue { 
 
    background: blue 
 
    }

<div class="father"> 
 
    
 
    <div class="child red"> 
 
    I am red 
 
    </div> 
 
    <div class="child blue"> 
 
    I am blue 
 
    </div> 
 
    <div class="child red"> 
 
    I am red 
 
    </div> 
 
    <div class="child blue"> 
 
    I am blue 
 
    </div> 
 
    </div>

,