[asp.net-mvc]与两列的表格

发布时间: 2016/10/9 6:10:56
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

你好正如标题所说我想用 2 列创建窗体。最后,我想要它看起来像这jsfiddle 我一直玩。然而看代码,我不相信这是正确的方法,正确我如果我错了。

代码是创建数据库进入标准 MVC ViewModel。

这里是我公司目前已在 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 }

解决方法 1:

有许多方法来实现这一目标。我是一个风扇的使用列表 (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%;
}

顺便说一句,我用 49%,因为在一些浏览器上的事情搞砸了。理想情况下,你会想要 50%。

[编辑] 现在如果你想要支持只 IE10 +,您可以使用列计数︰

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

ul li label {
    display: block;
}
官方微信
官方QQ群
31647020