Question

我正在尝试获得两个内部div框，其中包含标题和表单输入以并排显示，例如 this。我可以使用空框来执行此操作，但是当我添加表单输入时，box2变为偏移，如下所示：https://jsfiddle.net/4qux053b/

我发现如果我在box2中的单选按钮之后添加三个换行符，它们会重新对齐，但这似乎是一种解决问题的笨拙方法。这是我的代码：

HTML

<div id="outer">
<div id="content">
    <form name="orderForm" action="handler.php" method="post">
    <div class="interior">
        <h4>interior box1 heading</h4>
        <label><input id="cb1" type="checkbox" name="checkboxes" value="cb1" />checkbox1</label><br />
        <label><input id="cb2" type="checkbox" name="checkboxes" value="cb2" />checkbox2</label><br />
        <label><input id="cb3" type="checkbox" name="checkboxes" value="cb3" />checkbox3</label><br />
        <label><input id="cb4" type="checkbox" name="checkboxes" value="cb4" />checkbox4</label><br />
        <label><input id="cb5" type="checkbox" name="checkboxes" value="cb5" />checkbox5</label><br />
        <label><input id="cb6" type="checkbox" name="checkboxes" value="cb6" />checkbox6</label><br />
    </div>
    <div class="interior">
    <h4>interior box2 heading</h4>
        <label><input id="radio1" type="radio" name="radios" value="radio1" checked />radio1</label><br />
        <label><input id="radio2" type="radio" name="radios" value="radio2" />radio2</label><br />
        <label><input id="radio3" type="radio" name="radios" value="radio3" />radio3</label>
    </div>
    </form>
</div>

CSS

    body        {
                font-family: sans-serif;
                font-size: medium;
            }
h4          {
                margin: 0px;
            }
#outer      {
                width: 100%;
                max-width: 1000px;
                text-align: center;
                padding: 20px;
                border: 1px solid black;
            }
#content    {
                width: 90%;
                padding: 5%;
                border: 1px solid black;
            }
.interior   {
                display: inline-block;
                width: 24%;
                max-width: 300px;
                min-height: 200px;
                padding: 2%;
                border: 1px solid black;
            }

Answer 1

只需将vertical-align:top添加到内部课程

即可

.interior   {
    display: inline-block;
    width: 24%;
    max-width: 300px;
    min-height: 200px;
    padding: 2%;
    border: 1px solid black;
    vertical-align:top;
}

https://jsfiddle.net/4qux053b/1/

如何使表格输入显示的内部<div>框对齐？

1 个答案: