chuyển một đoạn văn bản xuống bằng CSS

Question

Tôi muốn chuyển sang một nhãn văn bản xuống khoảng 6px Tôi gắn các phong cách:

.price-label{ 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:small; 
    position:relative; 
    bottom:-6px; 
    vertical-align:bottom; 
} 

HTML là:

<table border="0" cellspacing="1" cellpadding="0"> 
    <tr> 
     <td height="45" colspan="2" align="center"><p><span class="text">Name</span><span class="name-label"></span></p></td> 
     </tr> 
      <tr> 
        <td>&nbsp;</td> 
        <td class="price-label">54.67</td> 
        </tr> 
        <tr> 
        <td width="28" bgcolor="#CCCCCC">&nbsp;</td> 
        <td height="45">&nbsp;</td> 
        </tr> 
        <tr> 
        <td width="28" bgcolor="#CC3300">&nbsp;</td> 
        <td height="112">&nbsp;</td> 
        </tr> 
        <tr> 
        <td width="28" bgcolor="#CCCCCC">&nbsp;</td> 
        <td height="22">&nbsp;</td> 
        </tr> 
       </table> 

Nhìn bề ngoài tôi muốn Nhãn 54.67 xuất hiện theo chiều ngang song song - với khoảng trống nơi ô màu xám (ô trên cùng) và ô đỏ (thứ hai từ trên cùng) gặp nhau. Khi số đại diện cho điểm đó trong thanh ở bên trái.

Vì vậy, nếu một số kỹ thuật khác là tốt hơn, xin vui lòng cho tôi biết, có lẽ tôi nên sử dụng DIVs sẽ cho tôi kiểm soát nhiều hơn?

Answer 1

Nếu tôi đọc chính xác, thì bạn đang cố gắng khoanh vùng giữa hai ô bảng không hoạt động. Bạn sẽ cần phải hợp nhất hai ô đầu tiên trong cột bên phải và sau đó rowspan = "2" ô mới với số trong đó. Sau đó trên cùng hoặc dưới cùng theo chiều dọc căn chỉnh văn bản trong ô và thêm một số phần đệm phía trên cho đến khi được căn chỉnh chính xác.

Answer 2

Bạn có thể được tốt hơn bằng cách sử dụng:

.price-label { margin-top: 6px; } 

Thật khó để biết thêm nếu không có bối cảnh gì khác là xung quanh rằng ô trong bảng mặc dù.

Answer 3

Nếu bạn muốn thay đổi nó xuống, bạn cần phải thay đổi nó một dương 6px, không phải là một 6px tiêu cực, và thiết lập các đầu tài sản, không dưới

position: relative; 
top: 6px; 

Answer 4

Sử dụng padding-top:6px; thay vì định vị, có thể rất lộn xộn với mối quan hệ với các yếu tố anh chị em vv .. và có các tác dụng phụ khác.

Answer 5

Nhãn là một phần tử nội tuyến, lề/đệm sẽ chỉ hoạt động khi bạn tạo khối đó (khối nội tuyến, khối hoặc phao). Hãy thử điều này:

.price-label { 
     padding:6px 0 0; 
    display: inline-block; 
    display: -moz-inline-box; 
    -moz-box-orient: vertical; 
    vertical-align: top; 
    zoom: 1; 
    *display: inline; }