2010-10-25 45 views
10

Tôi có một div chứa liên kết (a href). Tất cả các lề khác đang làm việc với a href nhưng lề trên không hoạt động với a href. Tôi muốn đặt các liên kết ở giữa nhưng vì không làm việc với lợi nhuận hàng đầu nên không thể thực hiện được. Tôi nghe bằng cách thiết lập vị trí hoặc hiển thị nó có thể hoạt động. Vui lòng đề xuất giải pháp xử lý chéo cho nó.Lề trên cùng bên trong một div không hoạt động?

div.MainContainer div.Links 
{ 
    height: 57px; 
    width: 100%; 
    border-top: solid 0px #404040; 
    border-left: solid 2px #404040; 
    border-right: solid 2px #404040; 
    border-bottom: solid 2px #404040; 
    background-image: url("../Images/links_background.png"); 
} 
div.MainContainer div.Links a 
{ 
    font:12px verdana; 
    color:White; 
    margin:10px; 
    border:dashed 1px white; 
    margin:15px 20px 20px 20px ; 
    width:100px; 
} 
+1

nếu bạn đang cố gắng để di chuyển các liên kết xuống trong div, bạn đã thử đệm? – Orbit

Trả lời

16

Thay vào đó, bạn cần phải làm nổi phần tử để làm lề hoặc sử dụng lề.

div.MainContainer div.Links a 
{ 
    float: left; 
    font:12px verdana; 
    color:White; 
    margin:10px; 
    border:dashed 1px white; 
    margin:15px 20px 20px 20px ; 
    width:100px; 
} 
+0

Thật lạ lùng, nhưng nó đang làm việc tho. Nó hoạt động trong IE 7 bình thường. – Tarik

+5

lý do tại sao chúng ta cần float yếu tố nếu chúng ta muốn 'margin-top' để được làm việc .. ?? – shashwat

+0

@shashwat Vì đó là CSS, không tìm kiếm lý do. –

2

Hãy thử padding-top trên div.Links hơn margin-top trên div.Links a.

4

Chiều cao của các phần tử nội tuyến không thể thay đổi, chỉ cần sử dụng display:inline-block; trên các liên kết của bạn.

+0

** + 1 ** nhưng lề không ảnh hưởng đến chiều cao của các phần tử và có thể thay đổi chiều cao trên các phần tử nội tuyến. tuy nhiên 'display: inline-block' là con đường để đi. – iConnor

3

Hãy thử bên dưới. Tôi đã thêm overflow: hidden vào định nghĩa hàng đầu và display: blockfloat: left vào định nghĩa dưới cùng. Việc bổ sung đầu tiên xóa phao được thêm vào, và hai lần cuối cho phép lề trên các liên kết hoạt động chính xác.

div.MainContainer div.Links 
{ 
    height: 57px; 
    width: 100%; 
    border-top: solid 0px #404040; 
    border-left: solid 2px #404040; 
    border-right: solid 2px #404040; 
    border-bottom: solid 2px #404040; 
    background-image: url("../Images/links_background.png"); 
    overflow: hidden; 
} 
div.MainContainer div.Links a 
{ 
    font:12px verdana; 
    color:White; 
    margin:10px; 
    border:dashed 1px white; 
    margin:15px 20px 20px 20px ; 
    width:100px; 
    display: block; 
    float: left; 
} 
0

sử dụng padding-top: 1px (ít nhất) cho div.Links và bạn không cần phải sử dụng phao trên div.Links a

Các vấn đề liên quan