四个标签和文本框在同一行中，元素之间有一定的间距

Four labels and text boxes in same row at a definite space between elements

本文关键字：之间 元素 一行 标签 四个 文本      更新时间：2023-09-26

如何使以下四个标签和文本框在同一行元素之间的特定距离。我在editor-label和editor-field中使用了左浮动但是它们的距离是随机的

<div class="editor-label">
        @Html.Label("firstname")
    </div>
    <div class="editor-field">
        @Html.TextBox("txtname")
    </div>
    <div class="editor-label">@Html.Label("lastname")</div>
    <div class="editor-field">
 @Html.TextBox("txtlname")
    </div>
    <div class="editor-label">@Html.Label("age")</div>
    <div class="editor-field">
 @Html.TextBox("txtlage")
    </div>
       <div class="editor-label">@Html.Label("salary")</div>
    <div class="editor-field">
 @Html.TextBox("txtsalary")
    </div>

不能将子元素的外边距/内距设置为父元素的百分比。然而，你可以使用vw css单位，它指的是视口宽度的百分比。因此10vw将是浏览器宽度的10%。

不幸的是，如果您的表单行容器与浏览器窗口的宽度不同，您可能会遇到问题。

(演示)

.form-line {
    white-space: nowrap;
}
.form-line div {
    display: inline-block;
    margin: 0 20vw;
}
.form-line div:first-child {
    margin-left: 0;
}
.form-line div:last-child {
    margin-right: 0;
}
.form-line div label {
    margin-right: 10vw;
}
<div class="form-line">
    <div>
        <label for="text1">First Text</label>
        <input type="text" id="text1">
    </div>
    <div>
        <label for="text2">Second Text</label>
        <input type="text" id="text2">
    </div>
    <div>
        <label for="text3">Third Text</label>
        <input type="text" id="text3">
    </div>
    <div>
        <label for="text4">Fourth Text</label>
        <input type="text" id="text4">
    </div>
</div>

相关文章：