4

这是来自css的一些代码

#linkheader/*Links bar for access to other parts of the website*/
 {
    width:900px;
    border-radius:25px;
    margin:20px 50px 0px 0px;
    padding:5px;
    border:1px dotted orange;
    text-align:center;
    float:right;
    color:orange;
    background-color:rgba(20,10,10,0.7);
}
.sourcelinkheader
{
width:1000px;
}
#content /*Material Container for Sources and Index*/
 {
    width:1000px;
    margin:10px auto;
    border:2px solid orange;
    background-color:rgba(20,10,10,0.7);
}

html正文

<body>
<div id="header">
    <h1>Information and Image Sources</h1>
</div>
    <div id="linkheader" class="sourcelinkheader">
    <p>
        <p><a href="index.html">Index</a> -
        <a href="Verkhluti_1.html">Introduction</a> -
        <a href="Verkhluti_1_katana.html">Nihontō</a> -
        <a href="Verkhluti_1_zweihander.html">Great Sword</a> -
        <a href="Verkhluti_1_gladius.html">Gladius</a> -
        <a href="Verkhluti_1_european swords.html">European</a> -
        <a href="Verkhluti_1_fencing.html">Fencing</a> -
        <a href="Verkhluti_1_source.html">Sources</a>
    </p>
</div>
    <div id= "content">
        <a href="http://en.wikipedia.org/wiki/Sword"><img src=http://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Wikipedia_wordmark.svg/174px-Wikipedia_wordmark.svg.png alt="Wikipedia"></a>
        <p><a href="http://www.weedhopper.org/">Metal Bakgrunnstextíll</a></p>
    </div>
<div class= "footer">
</div>
</body>

结果

我想要的结果是链接头的宽度变为 1000px，我希望它位于“内容”之上而不是它内部。

我做错了什么？

根据要求，http://jsfiddle.net/zjd9d/

4

4 回答 4

3 
float:right;

在您的内容样式中添加上面的代码将解决此问题并得到我认为您需要的内容，这是一个示例http://jsfiddle.net/qbBk6/2/

于 2013-04-04T10:07:50.790 回答
1

链接头的宽度被定义了两次，首先是通过一个 id:#linkheader然后通过一个 class .sourcelinkheader。

尽管width: 1000px;已在第二条规则中设置，但第一个更具体（id 而不是类）所以第一个适用（在此处阅读更多关于特异性的信息：https ://developer.mozilla.org/en-US/docs/ CSS/特异性）

于 2013-04-04T10:12:25.257 回答
0

Hey Rabcor you can easily achieve your desired result through simple css how i did it :

Just removed float:right and gave the width:1000; to your id #linkheader

and its working fine....

CSS

#linkheader
/*Links bar for access to other parts of the website*/
 {
    width:1000px;
    border-radius:25px;
    margin:20px 50px 0px 20px;
    padding:5px;
    border:1px dotted orange;
    text-align:center;
    color:orange;
    background-color:rgba(20, 10, 10, 0.7);
}

DEMO

于 2013-04-04T10:49:29.937 回答
0

this is how i fixed it.

I changed my css code to this.

Jsfiddle link

#linkheader/*Links bar for access to other parts of the website*/
 {
    width:900px;
    border-radius:25px;
    margin:20px 50px 0px 0px;
    padding:5px;
    border:1px dotted orange;
    text-align:center;
    float:right;
    color:orange;
    background-color:rgba(20,10,10,0.7);
}
#linkheader.sourcelinkheader
{
float:none;
margin: 10px auto;
width:1000px;
}

The thing that fixed it for me was changing

.sourcelinkheader

to

#linkheader.sourcelinkheader

and removing the float from it and using margin instead. (Since all windows were supposed to be centered.)

于 2013-04-04T10:19:03.937 回答