如何确保两个内联元素保持在同一行上

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>