1

我一直在按照书中的示例制作在线目录，并且在第 8 章任务 C：目录显示中遇到了一些令人沮丧的困难。

我已经按照说明输入了样式表的代码，但与书中显示的内容相比，它产生了略微倾斜的结果。虽然本质上是次要的和美学的，但它对我的信心有点冲击，并且在尝试继续阅读这本书时有点刺激。

截屏

如您所见，边框看起来有点混乱，顶部的图像覆盖了标题文本。

我一次又一次地通过代码，但似乎无法找出我哪里出错了。谁能给我一些线索？

来自 application.css.scss 的代码（我假设它在这里）

#banner {
    background: #9c9;
    padding: 10px;
    border-bottom: 2px solid;
    font: small-caps 40px/40px "Times New Roman", serif;
    color: #282;
    text-align: center;

    img {
        float: left;
    }
}

#notice {
    color: #000 !important;
    border: 2px solid red;
    padding: 1em;
    margin-bottom: 2em;
    background-color: #f0f0f0;
    font: bold smaller sans-serif;
}

#columns {
     background: #141;

     #main {
        margin-left: 17em;
        padding: 1em;
        background: white;
    }

    #side {
        float: left;
        padding: 1em 2em;
        width: 13em;
        background: #141;

        ul {
            padding: 0;

            li {
                list-style: none;

                a {
                    colour: #bfb;
                    font-size: small;
                }
            }
        }

    }

唯一给我提示的是在崇高的文本 2 中，所有以哈希开头（#banner、#notice 等）都是绿色的，但 #main 不是出于某种原因？

4

1 回答 1

0

我也一样。我不确定如何解决这个问题，因为#banner.img 应该向左浮动。在检查编译后的 application.css 时，我发现以下内容：

#banner {
  background: #9c9;
  padding: 10px;
  border-bottom: 2px solid;
  font: small-caps 40px/40px "Times New Roman", serif;
  color: #282;
  text-align: center; }
  #banner img {
    float: left; }

如上所示，我们有一个正确关闭的“#banner img {”起始块，并且#banner 块在与“text-align：center;”位于同一行之前正确关闭。即使我在 #banner 和 #banner img 块之后消除了所有其他 css 元素，问题仍然存在。

以我有限的 CSS 知识，我能很快弄清楚的唯一正确定位是从 #banner 块中删除 text-align: center ，并添加一些填充，或者设置 #banner 的左边距。 img 到 -400px 什么的。它不是很优雅也不是完美的功能（调整大小搞砸了）。

于 2013-11-25T00:44:13.707 回答