Wyrównaj dwie przęsła wewnątrz td - Jedna lewa i jedna prawa

Question

Mam stół. Wewnątrz td użytkownika Mam dwa znaczniki SPAN - tag jeden rozpiętości Chcę wyrównać w lewo, a drugi prawo, ale sędzia nie pozwala, że:

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

Więc chcę $ zostać dostosowane do dalekie opuścił z td i , aby wyrównać do odległego prawa z td.

Czy to możliwe?

Answer 1

Możesz użyć następującego selektora, bez dodatkowych zajęć:

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

Demo: http://jsfiddle.net/QR3kP/1/

---

Dla zgodności z IE7 i maksymalnie wykorzystać kod CSS poniżej:

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

Demo: http://jsfiddle.net/QR3kP/4/

---

Innym podejściem jest prawo wyrównaj tekst wewnątrz <td> i float tylko pierwszy <span>:

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

Demo: http://jsfiddle.net/QR3kP/29/

---

Można zastosować podobną metodę z powyższym za pomocą nawet mniej deklaracje CSS:

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

W przykład powyżej, domyślne wyrównanie tekstowe td zostało pozostawione, a użytkownik wybiera tylko rodzeństwo, które jest bezpośrednio cedowane po pierwszym span. Potem po prostu float to po prawej. Oczywiście możesz użyć selektora ~, który jest tym samym w tym przypadku.

Demo: http://jsfiddle.net/QR3kP/32/

---

Patrz tabela kompatybilności tutaj: http://kimblim.dk/css-tests/selectors/

zobaczyć selektorów CSS tutaj: http://www.w3.org/TR/CSS2/selector.html

Answer 2

Najprostszym sposobem jest unosić się pierwszy z lewej, a drugi z prawej

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> 

Answer 3

Prawdopodobnie najlepiej się to robi w pływaki.

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

Answer 4

Spróbuj tego:

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

DEMO

Answer 5

Można ustawić wartość float: left na span, zawierającą $ i float: right na numerze span zawierającą kwotę w dolarach.

Oto prosty demo tego.

Answer 6

Możesz zdefiniować styl float dla przęseł używających klas CSS.

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

Answer 7

Najlepszym sposobem byłoby umieścić klasę na każde z przęseł i zastosowanie pływaka do siebie ot klas

HTML

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

CSS

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