Question

我希望我的所有输入（image）在同一垂直线上对齐。

垂直对齐css属性不起作用，我找到的sass mixin也没有（见下文）。

@mixin vertical-align($pos) {
    position: $pos;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

有一种简单的方法可以做到这一点。我现在已经挣了四个半小时......

fiddle包括css＆amp; HTML

Answer 1

vertical-align属性沿水平线垂直对齐元素。我猜你想要所有输入从水平线上的同一个地方开始，创建一种双列网格。

这可以通过以下方式实现：

label {
  display: inline-block;
  width: 5em;
}

Answer 2

您也可以使用表格！这是你更新的小提琴：

http://jsfiddle.net/qych4/5/

格式化你的代码！

<section>
        <article>
            <form action="" id="book" method="post" name="book">
                <fieldset>
                    <legend>Boek</legend>
                    <table>
                        <tr>
                            <td><label>Email:</label></td>
                            <td><input type=""></td>
                        </tr>
                        <tr>
                            <td><label>Tours:</label></td>
                            <td><input type="checkbox"></td>
                        </tr>
                        <tr>
                            <td><label>Techno</label></td>
                            <td><input type="checkbox"><label>HCore</label>
                            <input type="checkbox"><label>Trance</label></td>
                        </tr>

                        <tr>
                            <td><label for="">Aantal pers:</label></td>
                            <td><input type="number"></td>
                        </tr>
                        <tr>
                            <td><label>Bericht:</label></td>
                            <td><textarea></textarea></td>
                        </tr>
                    </table>
                </fieldset>
            </form>
        </article>
    </section>

垂直对齐输入与标签

2 个答案: