0

Google Chrome を使用してこのコードを実行するのに問題があります (他のブラウザーはテストしていません)。表示すると、通常の段落は中央に配置されるはずなのに左端に表示され、MS Word で文字を強調表示したかのように、リンクの背景にギャップが表示されます。パディングを 0 に設定して、これを解決しようとしましたが、役に立ちませんでした。私は何を間違っていますか？

<html>

<head>
<link rel="stylesheet" type="text/css" href="My Chars.css">
<title>My Chars</title>
</head>

<body>
    <!--Defines the general styles for the page-->
    <span class = "default" style = "float:left; background-image:url('Paper Mache.jpg'); width:100%; height:100%">

        <!--Empty header-->
        <div id = "header" style = "height:50px; width:100%; align:top">

        </div>
        <br />
        <!--Left links panel-->
        <span class = "default" style = "width:50px; padding:0px;">
            <a href = "original.html">Original Chars</a>
            <br />
            <a href = "updated.html">Updated Chars</a>
            <br />
            <a href = "blended.html">Blended Chars</a>
        </span>
        <br />
        <!--Main body text-->
        <span class = "default">

            <div class = "section_head">
                My character site
            </div>

            <span class = "default">
                This site is dedicated to the various ideas I've had regarding various characters over the years. The site is divided into three main sections, based on where my input starts and stops. These divisions are:
            </span>
            <ul class = "default">
                <li>
                    <div style = "font-weight:bold">
                        Original Characters
                    </div>
                    These are characters created "from scartch". I designed almost everything, from the name to the costume to the character's background, powers, skills, weapons, etc.
                </li>
                <li>
                    <div style = "font-weight:bold;">
                        Updated Characters
                    </div>

                    These are existing charactes whose backstories, skills, and/or powers have been altered to reflect the times, make a more logical or cohesive origin --especially with respect to an archenemy or to merge several versions of that character together.
                </li>
                <li>
                    <div style = "font-weight:bold;">
                        Blended Characters
                    </div>

                    These are two or more different characters that have similar or shared elements in terms of backstory, character themes/arcs, powers/skills/abilities, etc. that have been mixed together so that the best elements of the individual characters produce a new, better "combination character."
                </li>
            </ul>           
            <span class = "default">
                In addition to these three main sections, there are subsections for heroes and villains and supporting cast. There are also divisions between "universes," e.g. DC comics universe vs a movie's universe.
            </span>
        <!--Closing th main body-->
        </span>
    <!--Closing the main page details-->
    </span>

</body>
</html>

外部スタイル シートの場合:

body
{
    margin: 0;
}
.default
{
    width: 800px;
    height: 100%;
    background-color: white;
    margin-left: auto;
    margin-right: auto;
}

.section_head
{
    background-color: white;
    font-size: large;
    font-weight: bold;
    text-align: center;
    width: 800px;
    margin-left:auto;
    margin-right: auto;
}

a:link
{
    color: red;
    font-weight: bold;
    padding: 0;
    margin: 0;
}

JSFiddle の例 - http://jsfiddle.net/L9LvS/

4

1 に答える 1

1

さて、私はあなたのコード内にいくつかの改善点があると思います。

たとえば、スパンタグはインライン要素であるため、ブロック要素をそこに挿入しないでください。代わりにdivタグまたはpタグを使用してみてください。
inline-blockと呼ばれる新しいcss-display-propertyもあることに注意してください。これは、floatの非常に優れた代替手段であり、後でWebサイトで発生する問題が大幅に少なくなります。
（http://bittersmann.de/articles/inline-block/）

ですから、私があなたの目標を正しく理解していない限り、ブロック要素に切り替えることで多くの問題が解決すると思います。
（HTMLを書き直したくない場合は、最初にdisplay：blockでこれを確認することもできます）

于 2012-11-05T19:10:50.403 に答える