Question

无论视口有多窄，我怎样才能确保两个内联元素保持在同一条线上？

在我的情况下，输入字段和提交按钮（看起来像是一个长按钮，你把电子邮件放进去）

Answer 1

他们需要包装在父元素中：

＆＃13;

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

＆＃13;

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

＆＃13;

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>

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

2 个答案: