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

我想要得到下面的结果，但不能得到正确的CSS - 我不断得到一个新的跨线或跨所有的内联。有两个跨度排在一个跨度旁边吗？

Desired result

我试着显示，清晰，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; 
}

来源

2013-12-09 BlueChippy

你尝试过什么？ – Hiral

我们可以看看你的CSS吗？也许是一个jsfiddle？ –

您新的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

来源

2013-12-09 07:44:24

哈哈哈！爱演示2！感谢演示1，这就是我所需要的。正是这样做的“内联块”。 – BlueChippy

呵呵没问题！乐于帮助！ –

尝试：

.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.

来源

2013-12-09 07:49:08 Hiral

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

回答

相关问题