HTML CSS对齐不同大小的框

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

正如现在一样，所有的盒子都在同一个位置结束

正文{
字体大小：100%；
背景色：黑色；
}
标签{
浮动：左；
字体大小：1.3em；
右侧填充：0.625em；
}
.盒子{
颜色：rgb（255、255、255）；
明确：两者皆有；
文本对齐：右对齐；
线高：1.5625em；
}
梅因先生{
浮动：左；
}
.菜单{
颜色：rgb（255、255、255）；
明确：两者皆有；
文本对齐：右对齐；
线高：1.5625em；
}

试验
豌豆
豌豆
豌豆
豌豆
豌豆

---

将其设置为“文本对齐：左”

一种方法是将标签部分固定在前面的某个确定宽度上，例如50像素，再加上Sarthak Jha提到的应用文本对齐：左。您还可以以%为单位指定宽度，并以像素为单位将其限制为最大宽度，还可以在浏览器中使用“溢出隐藏”或“自动”等。页面缩放不会中断对齐

正文
{
字体大小：100%；
背景色：黑色；
}
标签
{
浮动：左；
字体大小：1.3em；
右侧填充：0.625em；
宽度：15%；
最小宽度：45px；
最大宽度：150px；
}
.盒子
{
颜色：rgb（255、255、255）；
明确：两者皆有；
文本对齐：左对齐；
线高：1.5625em；
}
梅因先生{
浮动：左；
}
.菜单
{
颜色：rgb（255、255、255）；
明确：两者皆有；
文本对齐：左对齐；
线高：1.5625em；
}

试验
豌豆
豌豆
豌豆
豌豆
豌豆

您可以在

#peashooter

上使用

float:left

，并为

标签

元素指定一个宽度，以便您的输入正确对齐：

正文{
字体大小：100%；
背景色：黑色；
}
标签{
浮动：左；
字体大小：1.3em；
右侧填充：0.625em；
}
.盒子{
颜色：rgb（255、255、255）；
明确：两者皆有；
文本对齐：右对齐；
线高：1.5625em；
}
梅因先生{
浮动：左；
}
.菜单{
颜色：rgb（255、255、255）；
明确：两者皆有；
文本对齐：右对齐；
线高：1.5625em；
}
.main#peashooter{
浮动：左；
}
.主标签{
宽度：30px；
}

试验
豌豆
豌豆
豌豆
豌豆
豌豆

您可以使用网格布局来完成

检查：

正文{
字号：1.2rem；
背景色：黑色；
颜色：白色；
}
梅因先生{
显示：网格；
网格模板列：60px自动；
网格行间距：5px；
}

福
酒吧
酒吧1
酒吧2
酒吧3
酒吧4

它没有变直，菜单变得比文本框更右。菜单>标签{width:30px；}如果我使用px，如果我放大页面，它不会弄糟吗？如果你想的话，你可以使用13%的宽度。你如何得到30px是13%？如果我使用em或%有关系吗？我假设它们都是相对的。好吧，这正是我想要的。然而，我目前正在学习HTML和CSS，所以我对此有点陌生。px是个好主意吗？还是我应该坚持%？我在考虑与不同设备的兼容性。好吧，在这种布局下，你必须做出妥协。你可以尝试使用%单位，绝对可以！但是，在这种情况下，我强烈建议您也定义最小宽度和最大宽度，以防止形状太宽或太窄（挤压）。此外，溢出隐藏或自动可能会有所帮助。现在，如果表单中的关键字相对较短，则即使在移动屏幕中也不会出现问题（目前，典型的有效最小宽度约为300-320像素）。更新答案以%百分比显示宽度。CSS网格是最佳选项，如下所述：

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