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

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>