2012-04-12 45 views
17

Tôi muốn nhấn mạnh trình đơn điều hướng của tôi nhưng vấn đề là tôi cần nó dày hơn nên tôi đang sử dụng đường viền dưới để thay đổi chiều rộng thành 6px.Làm cho viền dưới gần hơn với văn bản

Tôi có thể tìm ra cách để biên giới xuất hiện gần văn bản hơn. Dường như khoảng cách 10px giữa văn bản và đường viền dưới cùng hiện tại và tôi không muốn có bất kỳ khoảng trống nào.

Tôi đã cố định vị trí div khác và vị trí nó tương ứng với mỗi {li} với {bottom: 10px} nhưng dường như tôi không thể làm cho nó hoạt động.

Dưới đây là những gì tôi có rất

<div id="menu"> 
    <ul> 
     <li><a href="#home">home</a></li> 
     <li><a href="#about">About</a></li> 
     <li><a href="#contact">Contact</a></li> 
    </ul> 
</div> 

CSS

#menu { 
position: fixed; 
left: 25%; 
clear: both; 
float: left; 
font-size: 80px; 
z-index: 500; 
filter: alpha(opacity=75); 
opacity: .75; 
} 

#menu ul{ 
text-decoration: none; 
list-style-type: none; 
margin: 0; 
padding: 0; 
line-height: 90px; 
} 

#menu ul li{ 
text-decoration: none; 
list-style-type: none; 
margin: 0; 
} 

#menu ul li a{ 
border-bottom: 6px solid #000; 
text-decoration: none; 
list-style-type: none; 
color: #000; 
} 

#menu ul li a:hover{ 
} 

Trả lời

17

Bạn có thể sử dụng một hỗn hợp của line-heightmargin để thu hút như một hiệu ứng, như vậy:

#menu ul li a { 
    border-bottom: 6px solid #000000; 
    color: #000000; 
    display: block; 
    line-height: 50px; 
    list-style-type: none; 
    margin: 20px 0; 
    text-decoration: none; 
} 
+4

Không tốt cho tập hợp văn bản được đặt 2 dòng và nhiều hơn nữa – Alexufo

-2

Hãy thử thêm này:

padding-bottom: 5px; 

để

#menu ul li a{ 
+0

Cảm ơn bạn đã trả lời. Tôi đã thử những gì bạn đề xuất đặt nó chỉ buộc biên giới xa văn bản. – Michael

+0

Thử đặt số âm là –

+4

Đệm âm không làm gì cả. –

1

Cố gắng this (Nga http://artgorbunov.ru/bb/soviet/20120510/ gốc) phương pháp bài viết (độ dốc nền và http://jsfiddle.net/d3WG6/)

<p>Зигварт считал <a><span>критерием истинности необходимость и&nbsp;общезначимость, для&nbsp;которых нет никакой опоры</span></a> в&nbsp;объективном мире.</p> 

a { font-size: 50%; border-bottom: 1px dashed red; } 
a > span { font-size: 200%; line-height: normal; } 
3

Sử dụng display: inline-block; kết hợp với border-bottom có thể gây ra một số ngắt dòng hành vi lạ nếu liên kết dài hơn chứa ngắt dòng, xem http://jsfiddle.net/PQZ9H/. Ngoài ra, bạn có thể sử dụng kết hợp của background-imagebackground-position có lợi thế là không chạm vào giá trị hiển thị.

a { 
    text-decoration: none; 
    position: relative; 
    background-repeat: repeat-x; 
    background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==); 
    background-position: left 15px; 
} 
a:hover { background: none; } 

Bất lợi là bạn có thể phải xác định vị trí nền cho mọi kích thước phông chữ bạn sử dụng.

Sử dụng kỹ thuật này bạn cũng có thể loại bỏ các biên giới từ xuống của như g hoặc y thêm

a span.descender { text-shadow: -1px 0px 0px white, 1px 0px 0px white, -2px 0px 0px white, 2px 0px 0px white, -3px 0px 0px white, 3px 0px 0px white; } 

<a href="javascript:void(0)"><span class="descender">A link with descenders like g or y</span></a> 

Xem http://jsfiddle.net/25XNY/1

0

tài sản Margin không thể thay đổi border- vị trí dưới cùng, vì vậy

Chiều cao của phần tử <a> sẽ xác định vị trí của phần dưới cùng của bạn.

#menu > ul > li > a { 
     height: ; 
} 
Các vấn đề liên quan