有两个专栏的形式 [英] Form with Two Columns

问题描述

您好，作为标题状态，我想创建一个具有2列的表单。最后，我希望它看起来像这样 jsfiddle我一直在玩，但通过看代码我不相信这是正确的方法，如果我错了，请纠正我。

代码是一个标准的MVC ViewModel，创建一个数据库条目。

这里是我目前在jsfiddle中的代码：

HTML p>

 < label for =IDofInput文字在这里< / label> < label for =IDofInput>文字在这里< / label> < br /> 
< input type =textid =IDofInput/> < input type =textid =IDofInput/> 
< / p> 
  

CSS

  label {width：140px; padding-right：20px; display：inline-block} 
  

解决方案

实现这一点。我是使用列表的粉丝（ jsFiddle ）：

HTML

 < ul> 
< li> 
< label>标签1< / label> 
< input type =text/> 
< / li> 
< li> 
< label>标签2< / label> 
< input type =text/> 
< / li> 
< li> 
< label>标签3< / label> 
< input type =text/> 
< / li> 
< li> 
< label> Label 4< / label> 
< input type =text/> 
< / li> 
< / ul> 
  

CSS：

 code> ul {
 width：100％; 
} 
 ul li {
 width：49％; 
 display：inline-block; 
} 
 
 ul li> * {
 width：100％; 
} 
  

顺便说一句，我使用了49％，因为在某些浏览器上，向上。理想情况下，你需要50％。

现在如果你只支持IE10 +，你可以使用列计数： / p>

  ul {
 column-count：2; 
 -moz-column-count：2; / * Firefox * / 
 -webkit-column-count：2; / * Safari和Chrome * / 
} 
 
 ul li label {
 display：block; 
} 
  

Hello as the title states I would like to create a form with 2 columns. In the end I want it to look like this jsfiddle I've been playing with. however by looking at the code I don't believe this is the proper way, correct me if I'm wrong.

The code is a standard MVC ViewModel that creates an entry into a database.

here is the code I currently have in jsfiddle:

HTML

<label for="IDofInput">text goes here</label> <label for="IDofInput">text goes here</label> <br />
<input type="text" id="IDofInput" /> <input type="text" id="IDofInput" />
</p>

CSS

label {width: 140px; padding-right: 20px; display: inline-block }

解决方案

There are many ways to achieve this. I'm a fan of using lists (jsFiddle):

HTML

<ul>
    <li>
        <label>Label 1</label>
        <input type="text" />
    </li>
     <li>
        <label>Label 2</label>
        <input type="text" />
    </li>
     <li>
        <label>Label 3</label>
        <input type="text" />
    </li>
     <li>
        <label>Label 4</label>
        <input type="text" />
    </li>
</ul>

CSS:

ul {
    width: 100%;
}
ul li {
    width: 49%;
    display: inline-block;
}

ul li > * {
    width: 100%;
}

By the way, I used 49%, because on some browser, things mess up. Ideally, you'll want 50%.

[Edit] Now if you want to support only IE10+, you can use column-count as well:

ul {
    column-count:2;
    -moz-column-count:2; /* Firefox */
    -webkit-column-count:2; /* Safari and Chrome */
}

ul li label {
    display: block;
}

这篇关于有两个专栏的形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！