html - 有两个跨度在一个跨度旁边排列吗？

Question

我正在尝试获得以下结果，但无法获得正确的 css - 我总是在新行上获得一个跨度，或者跨度的所有内联。

我试过弄乱 display、clear、float 等，但似乎无法让它对齐？

我可以使用 table 来做到这一点，而且效果很好......但是我认为必须有一种 css 方法来实现同样的目的吗？

<div>
    <span class="button">
        <button type="button">
            CLICK!</button>
    </span>
    <span class="field">
        <span>
            Field 1
        </span>
        <span>
            Field 2
        </span>
    </span>
</div>


.button
{
    margin: 1em 10px 0px 0px;
    width: 250px;
    text-align: right;
    display: inline-block;
}

.field
{
    margin: 0.5em 0px 0px;
    color: #002c5a;
}

Answer 1

您的新 CSS:在两个类(按钮和字段)和 添加 display:block; 到.field span {}。

.button
{
    margin: 1em 10px 0px 0px;
    width: 250px;
    text-align: right;
    float:left;
}

.field
{
    float:left;
    margin: 0.5em 0px 0px;
    color: #002c5a;
}
.field span { display:block;}

DEMO

Demo 2 有更多的 css，看起来像您的示例!

DEMO 2