如何確保兩個內聯元素保持在同一行上

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>