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

好吧，我认为您的代码中有一些改进之处。

例如，span-tags 是内联元素，因此不应在其中插入块元素。尝试使用 div- 或 p-tags 代替！
请注意，还有一个名为 inline-block 的新 css-display-property，它通常是浮动的非常简洁的替代品，并且以后在网站上造成的麻烦要少得多。
（http://bittersmann.de/articles/inline-block/）

所以，除非我没有让你的目标正确，否则我认为切换到块元素将解决你的很多问题。
（如果您不想重写 html，也可以先使用 display:block 进行检查）

于 2012-11-05T19:10:50.403 回答