HTML CSS对齐不同大小的框

Question

我有两个框：一个文本框和一个下拉菜单框。 问题是下拉框一直向右对齐。 我想要的是在标签文本的左侧。然后是定义的空间量。然后所有盒子都从某个位置开始。

现在，所有框都在同一位置结束。

body {
  font-size: 100%;
  background-color: black;
}

label {
  float: left;
  font-size: 1.3em;
  padding-right: 0.625em;
}

.box {
  color: rgb(255, 255, 255);
  clear: both;
  text-align: right;
  line-height: 1.5625em;
}

.main {
  float: left;
}

.menu {
  color: rgb(255, 255, 255);
  clear: both;
  text-align: right;
  line-height: 1.5625em;
}

<div class="main">
  <div class="box">
    <label for="test">test </label>
    <input type="text" id="test" placeholder="placeholder" />
    <div class="menu">
      <label for="peashooter">peas</label>
      <select id="peashooter">
        <option value="peas">peas</option>
        <option value="peas">peas</option>
        <option value="peas">peas</option>
        <option value="peas">peas</option>
      </select>
    </div>
  </div>

我希望框与绘制的左线对齐：

Answer 1

您可以使用网格布局来做到这一点。

检查：https://jsfiddle.net/filipasimao/Lca19d7z/

body {
  font-size: 1.2rem;
  background-color: black;
  color: white;
}

.main {
  display: grid;
  grid-template-columns: 60px auto;
  grid-row-gap: 5px;
}

<div class="main">
  <label for="foo">foo</label>
  <input type="text" id="foo" placeholder="foo placeholder" />

  <label for="bar">bar</label>
  <select id="bar">
    <option value="bar1">bar 1</option>
    <option value="bar2">bar 2</option>
    <option value="bar3">bar 3</option>
    <option value="bar4">bar 4</option>
  </select>
</div>

Answer 2

.menu
{
color: rgb(255, 255, 255);
clear:both; 
text-align:left;
line-height: 1.5625em; /* The distance between each box */
}

将其设为“文字对齐：左”

Answer 3

一种方法是使标签零件预先固定一些确定的宽度，例如50像素，外加text-align：left，如Sarthak Jha所述。您还可以指定宽度百分比，并将其限制为以像素为单位的最大宽度，还可以使用隐藏溢出或自动等功能。浏览器内页面缩放不会破坏对齐。

body 
{
	font-size:100%;
	background-color:black;
}

label
{
	float:left;
	font-size:1.3em;
	padding-right:0.625em;
	width:15%;
	min-width:45px;
	max-width:150px;
}
.box 
{
	color:rgb(255, 255, 255);
	clear:both; 
	text-align:left; 
	line-height:1.5625em; 
}
.main{
	float:left; 
}
.menu
{
	color:rgb(255, 255, 255);
	clear:both; 
	text-align:left;
	line-height:1.5625em;
}

<div class="main">
	<div class="box">
		<label for="test">test </label>
		<input type="text" id="test" placeholder="placeholder" />
	<div class="menu">
			<label for="peashooter">peas</label>
			<select id="peashooter">
				<option value="peas">peas</option>
				<option value="peas">peas</option>
				<option value="peas">peas</option>
				<option value="peas">peas</option>
			</select>
		</div>
</div>

Answer 4

您可以在float: left上使用#peashooter并为label元素设置宽度，以使输入正确对齐：

body {
  font-size: 100%;
  background-color: black;
}

label {
  float: left;
  font-size: 1.3em;
  padding-right: 0.625em;
}

.box {
  color: rgb(255, 255, 255);
  clear: both;
  text-align: right;
  line-height: 1.5625em;
}

.main {
  float: left;
}

.menu {
  color: rgb(255, 255, 255);
  clear: both;
  text-align: right;
  line-height: 1.5625em;
}

.main #peashooter {
  float: left;
}

.main label {
  width: 30px;
}

<div class="main">
  <div class="box">
    <label for="test">test </label>
    <input type="text" id="test" placeholder="placeholder" />
    <div class="menu">
      <label for="peashooter">peas</label>
      <select id="peashooter">
        <option value="peas">peas</option>
        <option value="peas">peas</option>
        <option value="peas">peas</option>
        <option value="peas">peas</option>
      </select>
    </div>
  </div>
</div>