Question

我有一张表格，我不知道为什么表格不是完全水平的。

            <div type="radio" name="q1" value="Broken">
              <br />
              <p class=main>Broken</p>
              <p class="sub">Doesn't turn or has serious functional<br/> and cosmetic issues</p>
            </div>

Answer 1

这种情况正在发生，因为第一个div.radio有两行内容，而其他内容只有一行，因此具有不同的高度。

垂直对齐的默认值是baseline，它沿着父对象的底边对齐元素。

如果您只是添加

vertical-align:top;

到.radio div[type='radio']的CSS，这三个div会将它们的顶部沿着相同的垂直位置对齐。

这是a working jsFiddle。

Answer 2

HTML

     <body class="questionnaire what">
    <form name="quiz" id="quiz">
        <div class="question">
            <div class="radio" id="form">
                <ul class="items">
                    <li class="main">Broken</li>
                    <li class="sub">Doesn't turn or has serious functional
                        and cosmetic issues</li>
                </ul>
                <ul class="items">
                    <li class="main">Good</li>
                    <li class="sub">Shows normal signs of use</li>
                </ul>
                <ul class="items">
                    <li class="main">Flawless</li>
                    <li class="sub">In new or like new condition</li>
                </ul>
            </div>
        </div>
    </form>
</body>

<强> CSS

*
{
    margin:0px;
    padding:0px;
}
.main {
        margin-bottom:0px;
        color:#fa7f28;
        font-size:25px;
        font-weight:bold;
    }
    .sub {
        color:#7d7d7d;
        font-size:16px;
        font-family:Georgia, "Times New Roman", Times, serif;
    }
    body .questionnaire {
        text-align: center;
        margin: 0px auto;
        width:1000px;
    }
    .radio {
        width:1000px;
        margin:0px;
        padding:10px;

    }
.radio li
{
    list-style-type:none;
}
    .items {
        float:left;
        display:inline-block;
        width:300px;
    padding:10px;

     margin:0px;

    }
    ul {
        background: transparent;
        border:1px solid #dcdcdc;
        border-radius:10px;
        cursor:pointer;
        text-align: left;
        opacity:1;
    padding:10px;
        -webkit-transition: opacity 300ms ease-in-out;
        top:0px;

    }
    .radio div[type='radio'].hover {
        opacity:1;
    }
    .radio div.active {
        box-shadow:0 0 2px 0px transparent inset;
    }

<强>小提琴

Fiddle Demo

Full Page Result

<强>输出：

enter image description here

表单间距无效

2 个答案: