在td內對齊兩個跨度 - 一個左側和一個右側

我有一張桌子。裏面的TD的我有兩個span標籤 - 一個span標籤我要左對齊，和其他權利，但TD不允許：在td內對齊兩個跨度 - 一個左側和一個右側

<table> 
    <tr> 
    <td colspan="5"><span>$</span><span>1000</span></td> 
    </tr> 
</table>

所以我想$對齊到td的遠端左端和與td的遠端右端對齊。

這可能嗎？

來源

2013-04-12 David Van Staden

很多答案存在，但看起來他們都在說同樣的事情。申請一門課並將它們左右浮動 – Andrew

@Andrew除了如果這是TD的唯一內容，您不必將第一個內容浮到左邊。 –

Yip有很多方法可以做到這一點，至今他們都看起來是正確的。但可以取決於他如何計劃使用它。 – Andrew

您可以使用下列選擇器，而無需使用額外的類別：

td span:last-child{ /*not compatible with <=IE8*/ 
    color:green; 
    float:right; 
}

演示：http://jsfiddle.net/QR3kP/1/

對於IE7兼容性和最多使用下面的CSS代碼：

td span{ 
    float:right; 
} 
td span:first-child{ /* compatible to >=IE7 */ 
    float:left; 
}

演示：http://jsfiddle.net/QR3kP/4/

另一種方法是權對齊中的文字和float僅第一<span>：

td { 
    text-align:right 
} 
td span:first-child { 
    float:left; 
}

演示：

td span:first-child + span { 
    float:right; 
}

在：http://jsfiddle.net/QR3kP/29/

可以使用甚至更少的CSS聲明使用類似的方法與上述上面的例子，默認td文本對齊是留下來的，你只能選擇立即預先設置的兄弟在第一個span後割讓。那麼你只需float它在右邊。當然，你可以使用~選擇器，在這種情況下是。

演示：http://jsfiddle.net/QR3kP/32/

看到這裏的兼容性圖表：http://kimblim.dk/css-tests/selectors/

參見CSS選擇器的位置：http://www.w3.org/TR/CSS2/selector.html

來源

2013-04-12 15:30:02 otinanai

最佳答案，無需額外標記！ –

請注意，IE8及以下版本不支持'last-child'，儘管如果你不需要IE8和以下的支持，這是迄今爲止最好的。 – ajp15243

@ ajp15243：我編輯了我的答案，以便與IE7兼容。感謝您指出了這一點。 – otinanai

簡單的方法是浮動的第一個向左，第二個向右

http://jsfiddle.net/L3QU2/1/

<table width="100%"> 
    <tr> 
    <td colspan="5"> 
     <span style="float:left">$</span> 
     <span style="float:right">1000</span></td> 
    </tr> 
</table>

來源

2013-04-12 15:27:32

內聯樣式不好 –

@DylanHayes我不是在建議內聯樣式，問題不在於如何正確分離CSS和HTML，這只是如何完成它的一個示例，它試圖簡潔地展示對OP代碼進行最少量的更改需要多少CSS。我希望我不必添加免責聲明。最好的答案是真的otinanai的，不需要添加任何標記到HTML，只能簡單地放入一個CSS片段 –

也許最好關閉花車做。

<td colspan="5"><span class="left">$</span><span class="right">1000</span></td>

CSS：

.left { 
    float: left 
} 

.right { 
    float: right; 
}

的jsfiddle：http://jsfiddle.net/NLZU5/

來源

2013-04-12 15:28:15

試試這個：

<table style="width:100%"> 
    <tr> 
    <td colspan="5"><span style="float:left;">$</span><span style="float:right;">1000</span></td> 
    </tr> 
</table>

DEMO

來源

2013-04-12 15:28:35

您可以在span上設置float: left，其中span包含$和float: right，其中span包含您的美元金額。

這是一個簡單的demo它。

來源

2013-04-12 15:28:41 ajp15243

您可以使用CSS類爲跨度定義float樣式。

<style> 
    .left { float: left; } 
    .right { float: right; } 
</style> 

<table> 
    <tr> 
    <td colspan="5"> 
     <span class="left">$</span> 
     <span class="right">1000</span> 
    </td> 
    </tr> 
</table>

來源

2013-04-12 15:28:44

我假設你是第一個回答我的問題？ –

我不確定。只是趕上任何人。我很樂意提供幫助。 –

謝謝你，欣賞 –

最好的辦法是一類放置到每個跨度和應用浮子每個加時賽類

HTML

<span class="left">$</span><span class="right">1000</span>

CSS

.left{float:left;} 
.right{float:right;}

來源

2013-04-12 15:29:46 Andrew

'.left'，'.right'不是語義的，'.sign'，'.value'怎麼樣？ –

@JuanMendes在css類命名中的語義？任何進一步的參考？ – otinanai

@otinanai CSS類名應代表它們代表的數據片段，而不是它們在頁面上的外觀。例如，某些語言在右側顯示貨幣符號，並且在這種情況下，您的CSS類名稱是沒有意義的。語義類名稱意味着您可以使用備用樣式表創建不同的外觀。請參閱http://css-tricks.com/semantic-class-names/和http://www.w3.org/QA/Tips/goodclassnames –

在td內對齊兩個跨度 - 一個左側和一個右側

回答

相關問題