Html 将标签左右对齐以便输入

我想使用dl dt dd list创建带有标签的输入表单，左边第一个标签，右边第二个标签，中间输入，我已经花了几个小时来解决这个问题。问题是，我可以将第一个标签放在右边或左边，但第二个标签不会放在左边或右边，而是并排输入

下面是一个例子：

以下是我迄今为止所做的尝试：

dt{
明确：两者皆有；
宽度：25%；
浮动：对；
文本对齐：左对齐；
}
标签{
字体：11px塔荷马，无衬线；
颜色：#000；
}
dd{
浮动：对；
宽度：25%；
利润率：0.15px；
}

标签1
输入说明
标签2

我想你想要这样

div{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

标签1
标签2

我希望这是您期望的添加

display:flex

和

justify content:space-between

属性到

.inline

类

.inline{
display:flex;
justify-content:space-between;
margin:0px 10px;
}

.inline{
显示器：flex；
证明内容：之间的空间；
利润率：0px 10px；
}

标签1
输入说明
标签2

dl、dd、dt只是默认为块元素的html元素。因此，通过将所有这些元素的样式设置为内联或内联块，它们将位于同一行

.inline>*{
显示：内联块；
}

标签1
输入说明
标签2

解决方案之一是使用flex

注意：此解决方案可能会因您需要支持的浏览器以及表单是否响应而有所不同，我想说的是，您是否有任何类型的CSS架构

dl.inline{
显示器：flex；
证明内容：柔性端；
}
.inline dt{
宽度：25%；
}
.dt：第一个孩子{
文本对齐：右对齐；
}
.inline dd{
显示器：flex；
弯曲方向：立柱；
柔性生长：1；
填充：0 15px；
保证金：0；
}
标签{
字体：11px塔荷马，无衬线；
颜色：#000；
}

标签1
输入说明
标签2

Noflex内联解决方案

dl{
文本对齐：居中；
}
dt{
显示：内联块；
}
标签{
字体：11px塔荷马，无衬线；
颜色：#000；
}
dd{
显示：内联块；
保证金：0 5px 0 5px；
}
小的{
显示：表格行；
}

标签1
输入说明
标签2

只需将所有内容向左浮动即可：

dt，
dd{
浮动：左；
保证金：5px；
}
dd小型{
显示：块；
}
/*居中*/
dl{
显示：表格；
保证金：自动；
}
/**/
标签{
字体：11px塔荷马，无衬线；
颜色：#000；
}

标签1
输入说明
标签2

关于

输入说明的内容如何？难道这根本就不应该被渲染吗？它可以从HTML中删除吗？谢谢，但我知道如何使用div，但正如我所说，我想保留dl dt dd列表，这是可能的吗？是的，它看起来不错，但你能像我尝试的那样在没有flex的情况下这样做吗…如上所述，并遵循我现有的css来修复我缺少的东西吗？@Robert checkout我的答案我已经更新了答案Yes，我真的需要它没有弹性，例如使用相对位置，显示。。float…如果可能的话，请？@Robert，我用
内联块
做了一个解决方案。请结帐。