内联表单，收缩以适合左侧的标签 [英] Inline form, shrink to fit labels to the left

问题描述

标题说明标签，因为这是我的用例，但显然它可以是任何元素。我想实现的是以下表单布局：

  [label] [input] 
 [ ] [input] 
 [第三个标签] [输入] 
  

目前我的HTML大致看起来像（省略详细信息）：

 < div& < label>标签< / label> < input type =text>< / div>< div> < label>另一个标签< / label> < input type =text>< / div>< div> < label>第三个标签< / label> < input type =text>< / div>  

然而，设计需要缩小标签，最高的一个，所以我不能使用固定宽度。我需要最长的标签来精确地适合屏幕的左侧和输入之间，所有其他标签应该也得到这个宽度。

我在看对于是实现这种布局的最好的方法，同时保持HTML作为语义的现实可能（一个额外的div在这里或没有一个问题，我现在使用它们更容易控制垂直对齐方式和一些小的样式） 。目前我的文本输入是相同的大小，但也有一些组的收音机/复选框，必须驻留在 [input] 部分。

此外，我想保留我的选项，使用媒体查询来应用一些RWD元素。这不是这个具体项目的一个很大的要求，但你永远不知道。不幸的是，我不得不支持低至9的IE。

如何解决这些问题在一个语义正确的（即不使用表）方式是支持通过IE9和IE10？

解决方案显然我错误的想法使用 display：table-cell 或者我在我的初始测试中做错了。

  div {display：table-row;} label，input {display：table- cell;} label {text-align：right;}  

  < div> < label>标签< / label> < input type =text>< / div>< div> < label>另一个标签< / label> < input type =text>< / div>< div> < label>第三个标签< / label> < input type =text>< / div>  

The title says labels because that's my use case, but obviously it could be any element. What I'm trying to achieve is the following form layout:

        [label] [input]
[another label] [input]
  [third label] [input]

Currently my HTML roughly looks like (leaving out the details):

div {
    overflow: auto;
}
label, input {
    float: left;
}
label {
    text-align: right;
    width: 200px;
 }

<div>
    <label>Label</label> 
    <input type="text">
</div>
<div>
    <label>Another label</label> 
    <input type="text">
</div>
<div>
    <label>Third label</label> 
    <input type="text">
</div>

However, the design requires me to shrink the labels to fit the tallest one, so I can't use a fixed width. I need the longest label to exactly fit between the left side of the screen and the input, and all the other labels should get that width too.

What I'm looking for is the best method to implement this layout while keeping the HTML as semantic as realistically possible (an extra div here or there isn't a problem, I use them now for a lot easier control over the vertical alignment and also some minor styling). Currently my text inputs happen to be the same size, but there's also some groups of radios/checkboxes that would have to reside in the [input] section.

Also, I'd like to keep my options open for the use of media queries to apply some RWD elements. This isn't a big requirement for this specific project, but you never know. Oh, and I have to support IE as low as 9, unfortunately.

How would I address these issues in a semantically correct (i.e. not using tables) way that is supported by IE9 and IE10?

解决方案

Apparently I had the wrong idea about using display: table-cell or I did something wrong in my initial tests. This seemed to be enough to get exactly how I wanted it

div {
    display: table-row;
}
label, input {
    display: table-cell;
}
label {
    text-align: right;
}

<div>
    <label>Label</label> 
    <input type="text">
</div>
<div>
    <label>Another label</label> 
    <input type="text">
</div>
<div>
    <label>Third label</label> 
    <input type="text">
</div>

这篇关于内联表单，收缩以适合左侧的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！