Tạo một khoảng cách bên trong một thẻ neo

Question

Tôi đang cố gắng làm cho giao diện này đẹp, nhưng tôi đã gặp sự cố. Tôi có một phần tử span có chứa một phụ đề hoặc mô tả ngắn bên trong thẻ neo. Thật không may, nó được tạo kiểu theo cách giống như neo, đó không phải là cách tôi muốn. Tôi đã thử áp dụng kiểu dáng cho chính nó nhưng chúng dường như bị ghi đè bởi các kiểu neo. Vấn đề là tôi không muốn nó được gạch dưới khi liên kết được di chuột qua.

Đây là html của tôi.

 <ul> 
      <li><a href="#">A <span class="subTitle">Subtitle</span></a></li> 
      <li><a href="#">B <span class="subTitle">Subtitle</span></a></li> 
      <li><a href="#">C <span class="subTitle">Subtitle</span></a></li> 
      <li><a href="#">D <span class="subTitle">Subtitle</span></a></li> 
      <li><a href="#">E <span class="subTitle">Subtitle</span></a></li> 
     </ul> 

Và CSS của tôi

#leftNav ul li { position: relative; } 
#leftNav ul li a span.subTitle 
{ 
    bottom:   4px; 
    color:   #000000; 
    display:   block; 
    font-size:  12px; 
    left:   10px; 
    position:  absolute; 
    text-decoration: none; 
} 

Tôi đã thử phong cách nhịp chính nó, mà dường như không có hiệu lực. Đặt khoảng cách bên ngoài neo, liên quan đến li cũng không hoạt động. span sẽ chặn sự kiện di chuột của neo và nó không thể nhấp được.

Answer 1

Một thử nghiệm mã mẫu của bạn (thêm trong một div phù hợp với id xung quanh nó) dường như làm việc tốt:

http://jsfiddle.net/44ndf/1/

phong cách mặc định của nó sẽ tất nhiên là giống như neo nên bạn có khả năng sẽ cần ghi đè mọi thứ trở lại bình thường. Bạn sẽ phải cung cấp mẫu làm việc (hoặc chính xác hơn không hoạt động) để chúng tôi có thể thu hẹp chính xác vị trí của vấn đề.

Tóm lại mặc dù điều cần kiểm tra bao gồm:

1) Đó selectors của bạn chắc chắn trỏ đến các yếu tố chính xác (ví dụ ở trên, chúng tôi đã phải bao gồm một div với id "leftNav" để làm cho bộ chọn nhặt nó lên

2) Rằng bạn chắc chắn không có kiểu xung đột - có thể có thứ gì đó có quyền ưu tiên cao hơn hoặc có thể có thứ gì đó có giá trị quan trọng.

3) Sử dụng Firebug để xem chính xác kiểu nào đang được áp dụng từ bộ chọn CSS nào để xác định vị trí của sự cố.

Edit:

Trong trường hợp của gạch dưới có vẻ như nó là không thể (hoặc ít nhất là không có cách nào tôi đã tìm thấy) để ghi đè lên một phong cách. Vì vậy, thay vào đó tôi đã thay đổi đánh dấu xung quanh một chút:

http://jsfiddle.net/44ndf/2/

<a href="#"><span>A </span><span class="subTitle">Subtitle</span></a> 

Với đánh dấu này, bạn có thể thiết lập phong cách như sau:

#leftNav ul li a span.subTitle 
{ 
    text-decoration: none; 
} 

#leftNav ul li a span 
{ 
text-decoration: underline; 
} 

#leftNav ul li a 
{ 
text-decoration: none; 
} 

này về cơ bản kể neo không có gạch dưới. Tất cả các nhịp đều có gạch chân và sau đó là phụ đề của bạn không có gạch dưới. Bạn sẽ cần phải chắc chắn rằng tất cả mọi thứ mà muốn gạch chân là trong một khoảng (bất cứ điều gì không trong một khoảng sẽ không được gạch dưới).

Đối với những gì giá trị của nó trông giống như một lỗi trình duyệt với tôi vì IE có vẻ hoạt động tốt - http://jsfiddle.net/44ndf/5/ không gạch dưới phụ đề trên IE nhưng trên firefox. Tôi nghi ngờ có abotu somethign đặc biệt gạch chân từ neo không bị ghi đè.

Answer 2

Không chắc chắn vấn đề là gì vì tôi không thể thấy thẻ neo kiểu dáng nào có, nhưng bạn luôn có thể thử !important sau quy tắc css. Một cái gì đó như thế này:

#leftNav ul li a span.subTitle 
{ 
    bottom:   4px; 
    display:   block; 
    font-size:  12px !important; 
    left:   10px; 
    position:  absolute; 
}