有兩個跨度排在一個跨度旁邊嗎？

我想要得到下面的結果，但不能得到正確的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

有兩個跨度排在一個跨度旁邊嗎？

回答

相關問題