logo标签列表

在这个CSS/HTML中，我做错了什么？

htmlcss
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);
}
正文 
<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/

3
如果你真的写了width:1000;，这里缺少单位（px）。而且你错误地将一个<p>标签嵌套在另一个未关闭的<p>标签中。 - Fabrizio Calderan
1
你还为linkheader设置了width:900px;。 - Dipesh Parmar
我把 width:1000; 改成了 width:1000px;，但没有任何效果。 - Rabcor
+1 对于一个真正好的问题，包含了所有必要的信息（甚至有截图） - winner_joiner
如果您创建了一个示例的 JSFiddle，我们可以更好地帮助您。 - medina
Dipesh Parmar是正确的，你的CSS入口#linkheader由于选择器的具体性覆盖了.scourcelinkheader。如果这是实际代码，我会检查Fabrizio Calderan关于<p>标签的写法。 - winner_joiner
4个回答
3
float:right;

将上述代码添加到您的内容样式中将修复此问题并实现您所需的结果，以下是示例：http://jsfiddle.net/qbBk6/2/。
1
链接头的宽度定义了两次，第一次是通过id：#linkheader，第二次是通过类.sourcelinkheader。即使在第二个规则中设置了width: 1000px;，但第一个规则更具体（使用id而不是类），因此应用第一个规则（在这里阅读有关特异性的更多信息：https://developer.mozilla.org/en-US/docs/CSS/Specificity）。
0

这是我如何解决的。

我将我的 CSS 代码更改为以下内容。

Jsfiddle 链接

#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

并将其中的浮动删除，改用边距（margin）代替。（因为所有窗口都应该居中显示。）

终于成功得到了正确的答案。stackoverflow第一次没有接受我的代码缩进。 - Rabcor
0

嘿，Rabcor，你可以通过简单的CSS轻松实现你想要的结果，就像我做的一样：

只需删除float:right并将width:1000;赋予你的ID#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);
}

演示

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接