css 将表单中的标签与输入对齐

lsmd5eda 于 2023-05-02 发布在其他

关注(0)|答案(8)|浏览(210)

我有非常基本和已知的形式，我需要对齐标签旁边的输入正确的情况下。但是我不知道怎么做。
我的目标是将标签与右侧的输入对齐。以下是预期结果的图片示例。

为了您的方便，我做了一个小提琴，以澄清我现在所拥有的-http://jsfiddle.net/WX58z/
片段：

<div class="block">
    <label>Simple label</label>
    <input type="text" />
</div>
<div class="block">
    <label>Label with more text</label>
    <input type="text" />
</div>
<div class="block">
    <label>Short</label>
    <input type="text" />
</div>

css

来源：https://stackoverflow.com/questions/9686538/align-labels-in-form-next-to-input

8条答案

按热度按时间

xvw2m8pv1#

警告：过时的答案

现在你应该避免使用固定的宽度。您可以使用flexbox或CSS grid来提出响应式解决方案。查看其他答案。
一个可能的解决方案：

为label元素确定合理的固定宽度，并使用width设置
给予他们display: inline-block
文本向右对齐

即：

label {
  display: inline-block;
  width: 140px;
  text-align: right;
}

<div class="block">
    <label>Simple label</label>
    <input type="text" />
</div>
<div class="block">
    <label>Label with more text</label>
    <input type="text" />
</div>
<div class="block">
    <label>Short</label>
    <input type="text" />
</div>

JSFiddle

赞(0）回复(0）举报 2023-05-02

du7egjpx2#

虽然这里的解决方案是可行的，但更新的技术已经为我认为是更好的解决方案做出了贡献。CSS Grid Layout 允许我们构建更优雅的解决方案。
下面的CSS提供了一个2列的“设置”结构，其中第一列应该是右对齐的标签，然后是第二列中的一些内容。更复杂的内容可以在第二列中显示，方法是将其 Package 在。
[As旁注：我使用CSS来添加每个标签后面的'：'，因为这是一个风格元素-我的偏好。]

/* CSS */

div.settings {
    display:grid;
    grid-template-columns: max-content max-content;
    grid-gap:5px;
}
div.settings label       { text-align:right; }
div.settings label:after { content: ":"; }

<!-- HTML -->

<div class="settings">
    <label>Label #1</label>
    <input type="text" />

    <label>Long Label #2</label>
    <span>Display content</span>

    <label>Label #3</label>
    <input type="text" />
</div>

赞(0）回复(0）举报 2023-05-02

s1ag04yj3#

之前回答过这样的问题，可以在这里看看结果：
Creating form to have fields and text next to each other - what is the semantic way to do it?
因此，要将相同的规则应用于fiddle，您可以使用display:inline-block并排显示标签和输入组，如下所示：

CSS

input {
    margin-top: 5px;
    margin-bottom: 5px;
    display:inline-block;
    *display: inline;     /* for IE7*/
    zoom:1;              /* for IE7*/
    vertical-align:middle;
    margin-left:20px
}

label {
    display:inline-block;
    *display: inline;     /* for IE7*/
    zoom:1;              /* for IE7*/
    float: left;
    padding-top: 5px;
    text-align: right;
    width: 140px;
}

updated fiddle

赞(0）回复(0）举报 2023-05-02

r7xajy2e4#

我使用类似的东西：

<div class="form-element">
  <label for="foo">Long Label</label>
  <input type="text" name="foo" id="foo" />
</div>

款式：

.form-element label {
    display: inline-block;
    width: 150px;
}

赞(0）回复(0）举报 2023-05-02

nwsw7zdq5#

我知道这是一个老线程，但更简单的解决方案是在标签中嵌入一个输入，如下所示：

<label>Label one: <input id="input1" type="text"></label>

赞(0）回复(0）举报 2023-05-02

5ssjco0h6#

您也可以尝试使用flex-box

<head><style>
body {
    color:white;
    font-family:arial;
    font-size:1.2em;
}
form {
    margin:0 auto;
    padding:20px;
    background:#444;
}
.input-group {
    margin-top:10px;
    width:60%;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
}
label, input {
    flex-basis:100px;
}
</style></head>
<body>

<form>
    <div class="wrapper">
        <div class="input-group">
            <label for="user_name">name:</label>
            <input type="text" id="user_name">
        </div>
        <div class="input-group">
            <label for="user_pass">Password:</label>
            <input type="password" id="user_pass">
        </div>
    </div>
</form>

</body>
</html>

赞(0）回复(0）举报 2023-05-02

r7xajy2e7#

你可以这样做：
HTML：

<div class='div'>
<label>Something</label>
<input type='text' class='input'/>
<div>

CSS：

.div{
      margin-bottom: 10px;
      display: grid;
      grid-template-columns: 1fr 4fr;
}

.input{
       width: 50%;
}

希望这有帮助！：）

赞(0）回复(0）举报 2023-05-02

6rqinv9w8#

这里是所有表单标签的通用标签宽度。没有固定的宽度。
使用所有标签调用setLabelWidth计算器。此函数将加载UI上的所有标签并找出最大标签宽度。将以下函数的返回值应用于所有标签。

this.setLabelWidth = function (labels) {
            var d = labels.join('<br>'),
                dummyelm = jQuery("#lblWidthCalcHolder"),
                width;
            dummyelm.empty().html(d);
            width = Math.ceil(dummyelm[0].getBoundingClientRect().width);
            width = width > 0 ? width + 5: width;
            //this.resetLabels(); //to reset labels.
            var element = angular.element("#lblWidthCalcHolder")[0];
            element.style.visibility = "hidden";
            //Removing all the lables from the element as width is calculated and the element is hidden
            element.innerHTML = "";
            return {
                width: width,
                validWidth: width !== 0
            };

        };

赞(0）回复(0）举报 2023-05-02

我来回答

css 将表单中的标签与输入对齐

8条答案

相关问题

热门标签

最新问答