当前位置: 动力学知识库 > 问答 > 编程问答 >

Confused with my CSS layout

问题描述:

I have the following:

<div id="sbr">

<div id="sbr_bdy">

<div id="sbr_lnk">

<div><a>test</a></div>

<div><a>test</a></div>

<div><a>test</a></div>

<div><a>test</a></div>

<div><a>test</a></div>

<div><a>test</a></div>

</div>

</div>

</div>

and

#sbr_lnk a {

border-bottom: 1px solid #CCCCCC;

border-radius: 5px 5px 5px 5px;

border-top: 1px solid #FFFFFF;

float: left;

height: 25px;

line-height: 25px;

padding-left: 10px;

width: 180px;

}

#sbr { width: 200px; background-color: pink; }

#sbr_lnk div {

height: 25px;

margin-left: 10px;

margin-right: 10px;

width: 180px;

background-color: yellow;

}

#sbr_lnk {

padding-top: 25px;

padding-bottom: 25px;

background-color: green;

}

What I would like to see is that:

1) sbr_lnk serves as a background for all the inner DIVs and As. Right now it doesn't go from top to bottom:

2) The DIVs inside sbr_lnk have 10px space on the right and left

3) The As have curved corners and fit just inside the DIVs.

I have tried a lot of combinations but I think my big problem is with sbr_lnk. It does not seem to be working as a background DIV. Help would be much appreciated.

Here's a fiddle

the inner address link is a rectangle with rounded corners that's 10px inside of the

网友答案:

You have too many styled applied to the <a> tag.

Move some styles to the wrapper divs and it will look as you desire.

#sbr_lnk div {
    height: 25px;
    width: 180px;
    background-color: yellow;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 0 10px;
}

See the example here.

网友答案:

Could also be done like this: http://jsfiddle.net/7ttyT/34/ in order to keep the style to the tag for reusability's sake, with multiple a's in one div.

分享给朋友:
您可能感兴趣的文章:
随机阅读: