在一个跨度旁边有两个跨度？

Question

我正在尝试获得以下结果，但无法使css正确 - 我不断获得新行的跨度，或者所有跨度的内联。

我已经尝试搞乱显示，清除，浮动等等，似乎无法将其排成一行？

我可以使用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:inline-block至float:left;两个班级（按钮和字段）和添加 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

演示2有更多css，看起来像你的样本！

<强> DEMO 2

Answer 2

尝试：

.button,.field{display:table-cell;vertical-align:middle;padding:5px;border:1px solid #ccc;width:50%;}
.button{text-align:right;}
.field{text-align:left;color: #002c5a;}
div{display:table;margin:0 auto;width:100%;}
.field span{display:block;}

DEMO here.