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 を介して 2 回定義され.sourcelinkheaderます。

は 2 番目のルールに設定されていますwidth: 1000px;が、最初のルールはより具体的 (class ではなく id) であるため、最初のルールが適用されます (詳細については、https ://developer.mozilla.org/en-US/docs/ を参照してください)。 CSS/仕様)

于 2013-04-04T10:12:25.257 に答える
0

Rabcor さん、簡単な CSS を使用して、目的の結果を簡単に達成できます。

を削除して、あなたの ID に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);
}

デモ

于 2013-04-04T10:49:29.937 に答える
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

フロートを削除し、代わりにマージンを使用します。（すべてのウィンドウが中央に配置されるはずだったので。）

于 2013-04-04T10:19:03.937 に答える