Question

这里有一些来自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

<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>

Result

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

我做错了什么？

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

Answer 1

float:right;

在您的内容样式中添加上述代码将解决此问题，并在此处获取我认为您需要的示例http://jsfiddle.net/qbBk6/2/

Answer 2

linkheader的宽度定义了两次，首先是id：#linkheader，然后是类.sourcelinkheader。

即使在第二条规则上设置了width: 1000px;，第一条规则也更具体（id而不是class），所以第一条规则适用（在此处详细了解：https://developer.mozilla.org/en-US/docs/CSS/Specificity）

Answer 3

这是我修复它的方式。

我将我的css代码改为此。

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;
}

为我修复它的事情正在改变

.sourcelinkheader

到

#linkheader.sourcelinkheader

并从中移除浮动并使用边距代替。（因为所有的窗户都应该居中。）

Answer 4

Hey Rabcor你可以通过简单的css轻松实现你想要的结果我是怎么做到的：

刚删除float:right并将width:1000;提供给您的身份#linkheader

及其工作正常......

<强> 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

我在这个css / html中做错了什么？

4 个答案: