首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在CSS中对齐表单元素

在CSS中对齐表单元素
EN

Stack Overflow用户
提问于 2012-11-03 06:41:27
回答 2查看 83.5K关注 0票数 27

我是CSS的新手,有一个简单的登录表单,我试图正确地对齐。基本上是两列,标签和Login按钮在一列,文本框在另一列。我如何在CSS中做到这一点?

HTML代码为:

代码语言:javascript
复制
<body>
  <form action="" method="post">
    <label> Username </label>
    <input type="text"/>

    <label> Password </label>
    <input type="password"/>

    <input type="submit" value="submit"/>
  </form>
</body>
EN

回答 2

Stack Overflow用户

发布于 2012-11-03 06:53:24

对于您提出的问题,我会简单地将它们放在一个表中。

代码语言:javascript
复制
  <form action="" method="post">
    <table>
        <tr>
            <td><label> Username </label></td>
            <td><input type="text"/></td>
        </tr>
        <tr>
            <td><label> Password </label></td>
            <td> <input type="password"/></td>
        </tr>
        <tr>
            <td colspan="2"><input type="submit" value="submit"/></td>
        </tr>
    </table>
  </form>      

下面是它将是什么样子的http://jsfiddle.net/wCSAn/

票数 3
EN

Stack Overflow用户

发布于 2018-08-23 12:08:29

还可以使用CSS中的position属性根据需要以特定的指定方式对齐标签和输入。这样,它们就会根据父元素进行排列。

代码语言:javascript
复制
form {
    position: relative;
    width: 70%;
    text-align: right;
}

label {
    width: 30%;
    position: absolute;
    left: 10%;
    text-align: right;
    margin-right: 30px;
}

input[type=submit] {
    position: absolute;
    left: 25%;
    background-color: #9AE5F8;
}

这是它的jsfiddle的链接。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/13204002

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档