调整浏览器大小时如何让 html 控件一起移动

Question

我有一个带有标签和控件的 HTML 页面。当浏览器宽度调整得更小时，使标签与控件保持一致的最佳方法是什么？

这是一个简单的例子：

<label id="lbTest1">Enter your first name here:</label>
<input type="text" id="txtFirstName" />
<label id="lbTest2">Enter your last name here:</label>
<input type="text" id="txtLastName" />
<label id="lbTest3">Enter your preference here:</label>
<input type="text" id="txtPreference" />

在将浏览器宽度调整得更小时，文本框 txtPreference 换行到下一行，然后是“here:”，然后是“preference”等等，因为宽度被调整得更小了。

这里是 link 上面 HTML resize 更小的结果的图像： screen snapshot

我不想使用表格（至少在理想情况下是这样），而且特定页面太简单而无法利用完整的响应能力。

Answer 1

使用 Flex

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  flex-grow:1;
  min-width:100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>Flexible Boxes</h1>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
</div>

<p>Try to resize the browser window.</p>
<p>A container with "flex-wrap: nowrap;" will never wrap its items.</p>
<p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10 or earlier versions.</p>

</body>
</html>

调整浏览器大小时如何让 html 控件一起移动

How do you get html controls to move together when browser is resized

html

css

responsive