Question

我难以将表单元素对齐，看起来像这样：

enter image description here

现在它看起来像这样：

enter image description here

任何想法如何解决它，我到目前为止一直在尝试使用CSS，但似乎没有任何工作。此外，它似乎没有响应，当我缩小浏览器窗口时，有很多溢出。到目前为止，这是我的代码：

CSS

.bookings {
    background-color: #FFF;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 3% 5%;
    margin-top: 2%;
}
.bookings h1 {
    font-size: 25px;
    text-align: center;
    color: #F3C;
}
::-webkit-input-placeholder {
 color: blue;
}
.bookingform input, .bookingform textarea, .bookingform select {
    border: 1px solid #000;
}
.bookingform {
    border: 1px solid #000;
    border-style: solid;
    padding: 1em;
    margin: 2em;
}
.bookingform textarea {
    width: 30%;
    height: 60%;
}
.option label {
    display: block;
    width: 20em;
    text-align: right;
    margin-right: 20em;
}
input#time {
    display: inline;
}
.bookingform input type=["checkbox"] {
 float:right;
}

Jsfiddle：http://jsfiddle.net/zqqb62j8/1/

Answer 1

缩小标签的宽度和右边距，并将它们设置为内联块。此外，从他们删除输入，他们不需要是标签的孩子，但兄弟姐妹：

.option label {
    display: inline-block;
    width: 10em;
    text-align: right;
    margin-right: 2em;
}

查看前三个元素的外观：http://jsfiddle.net/zqqb62j8/2/

更新

这是一个更简单/可读的示例，与您想要的类似：http://jsfiddle.net/zqqb62j8/7/

Answer 2

我更改了html的第一部分并替换了css。查看JSFiddle。我给所有标签，输入和textareas一个宽度，所以他们很好地排队。此外，我使用基本浮动和清除来定位所有东西。

.option{
    background-color: #DDD;
    margin: 5px;
    float: left;
    clear: left;
}
.option label{
    float: left;
    clear: left;
    width: 150px;
    margin: 10px;
}
.option input, .option textarea{
    width: 150px;
    max-width: 150px;
    float: left;
    margin: 10px;
}
h1{
    font-size: 20px;
    font-weight: bold;
    width: 300px;
    margin: 5px;
}

Answer 3

一个非常常见的问题，我建议你这么做，只保留上面提到的必要的格式，但我要提到的是你可以通过使用一些工具来快速做到这一点，你可以使用GUI对齐元素，

在线工具：您可以使用可在浏览器中运行的以下工具来对齐并查看其工作原理：

- http://www.cssdesk.com/

- http://jsfiddle.net/

具有WYSIWYG的软件： WYSIWYG（/wɪziwɪɡ/ WIZ-ee-wig）是“所见即所得”的首字母缩写。

-Dreamweaver：我使用的最好的网页设计工具之一。使用Dreamweaver对齐元素的教程：youtube.com/watch?v=eG5rkN80hSI

-Amaya：专为windows / linix / mac打造

此外，虽然你问的是非常具体的，但我只是想列出更好的方法来做到这一点。希望它有所帮助。

难以将表单元素对齐以使其看起来正确且响应迅速

3 个答案: