Question

我创建了一个网站，我有两个问题：

1）我无法将2个div #home和essay并排放置。我试图使用display：inline-block;但由于某种原因它不起作用。 2）出于某种原因，“我的论文”这一部分有下划线。我尝试使用text-decoration：none;但由于某种原因，这不起作用。

这是我的HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
      <title>Assignment II: Loups</title>
      <link rel="stylesheet" type="text/css" href="blocks/css/loups.css">
</head>
<body>
    <div id="container">
        <h1>@ Loup's</h1>

    <div id="home">
        <h3><a href="#">Home</a></h3>
        <ul>
            <li><a href="#">articles/</a>
                <ul>
                    <li><a href="#">beliefs respcect and facts</li>
                    <li><a href="#">classes suck</li>
                    <li><a href="#">taboo oo</li>
                    <li><a href="#">classes as syntactic sugar</li>
                    <li><a href="#">better keyworkd</li>
                    <li><a href="#">ideal computer</li>
                    <li><a href="#">assignment</li>
                    <li><a href="#">language</li>
                    <li><a href="#">dcvs</li>
                    <li><a href="#">is fp feasible</li>
                    <li><a href="#">does oo sucks</li>
                </ul>
            </li>
            <li><a href="#">projects/</li>
            <li><a href="#">tutorials/</li>
            <li><a href="#">contact me</li>
        </ul>
    </div>
    <div id="essay">
        <h2>My Essay</h2>
        <p>My last posts depend on each other, and should be read in sequence. Articles not in bold are optional.</p>
        <ul>
            <li>
                <span>
                <a href= >"Assignment Statement Considered Harmful."</a>
                 Pervasice mutable state make programs more difficult to deal with. While this is old news, most programmers don't know or don't care. It's a pitty, becase simple remedies exist.
                </span>
            </li>
            <li>
                <span>
                <a href= >"Defining Syntantic Sugar"</a>
                I sometimes hear arguments about what is or is not syntactic sugar. This is an attempt at defining it.
               </span>
            </li>
            <li>
                <span>
                <a href= >"Class Based Programming as Syntantic Sugar"</a>
                Most of the time, "Object Oriented" actually means classes. Classes are nothting more than syntactic sugar, at least in statically typed languages such as Java and C++. Sugar is not useless, but seeing past it helps us understand classes better.
                </span>
            </li>
            <li> 
                <span>
                <a href= >"Taboo OO"</a>
                The term "OO" is so overloaded that we should stop using it. Better substitues are "classes" and "prototypes"
.               </span>
            </li>
            <li>
                <span>
                <a href= >"How Class Based Programming Sucks"</a>
                Classes are vastly sub-optimal. Functional programming is far better.
                </span>
            </li>
        </ul>
    </div>
    <footer>
        <p>Contact, suggestions: Send me and email at <a href="#">l@loup-vallant.fr</a></p>
            <p>Built with <a href="#">USSM</a></p>
    </footer>
</div> <!-- end of container -->

</body>
</html>

这是我的CSS代码

 #container h1 {
    border-radius: 25px;
    background: #d3d3d3;
    height: 67px;
    padding-top: 20px;
    padding-left: 10px;
    font-size: 250%;
}

#home, #essay {
    display: inline-block;
    margin: 5px;
}

#home {
    border-radius: 25px;
    background: #d3d3d3;
    padding: 3px 18px 0px 10px;
}

#home a {text-decoration: none;

}

#essay {
    border-radius: 25px;
    background: grey;
    padding-left: 10px;
    padding-top: 3px;
}

#essay h2, p {
    color: blue;
}

#essay h2:link {
    text-decoration: none;
}

footer {
    border-radius: 25px;
    background: #d3d3d3;
    padding-left: 10px;
    padding-top: 3px;
}

Answer 1

将任意宽度设置为#essay，以便限制其宽度。

在您的列表项中关闭锚标记将解决您在“我的论文”标题中提到的问题。

#essay {
    border-radius: 25px;
    background: grey;
    padding-left: 10px;
    padding-top: 3px;
    max-width: 60%;
}

#container h1 {
    border-radius: 25px;
    background: #d3d3d3;
    height: 67px;
    padding-top: 20px;
    padding-left: 10px;
    font-size: 250%;
}

#home, #essay {
    display: inline-block;
    margin: 5px;
}

#home {
    border-radius: 25px;
    background: #d3d3d3;
    padding: 3px 18px 0px 10px;
}

#home a {text-decoration: none;

}

#essay {
    border-radius: 25px;
    background: grey;
    padding-left: 10px;
    padding-top: 3px;
    max-width: 60%;
}

#essay h2, p {
    color: blue;
}

#essay h2:link {
    text-decoration: none;
}

footer {
    border-radius: 25px;
    background: #d3d3d3;
    padding-left: 10px;
    padding-top: 3px;
}

#container div {
    vertical-align: top;
}

<div id="container">
        <h1>@ Loup's</h1>

    <div id="home">
        <h3><a href="#">Home</a></h3>
        <ul>
            <li><a href="#">articles/</a>
                <ul>
                    <li><a href="#">beliefs respcect and facts</a></li>
                    <li><a href="#">classes suck</a></li>
                    <li><a href="#">taboo oo</a></li>
                    <li><a href="#">classes as syntactic suga</a>r</li>
                    <li><a href="#">better keyworkd</a></li>
                    <li><a href="#">ideal computer</a></li>
                    <li><a href="#">assignment</a></li>
                    <li><a href="#">language</a></li>
                    <li><a href="#">dcvs</a></li>
                    <li><a href="#">is fp feasible</a></li>
                    <li><a href="#">does oo suck</a>s</li>
                </ul>
            </li>
            <li><a href="#">projects/</a></li>
            <li><a href="#">tutorials/</a></li>
            <li><a href="#">contact me</a></li>
        </ul>
    </div>
    <div id="essay">
        <h2>My Essay</h2>
        <p>My last posts depend on each other, and should be read in sequence. Articles not in bold are optional.</p>
        <ul>
            <li>
                <span>
                <a href= >"Assignment Statement Considered Harmful."</a>
                 Pervasice mutable state make programs more difficult to deal with. While this is old news, most programmers don't know or don't care. It's a pitty, becase simple remedies exist.
                </span>
            </li>
            <li>
                <span>
                <a href= >"Defining Syntantic Sugar"</a>
                I sometimes hear arguments about what is or is not syntactic sugar. This is an attempt at defining it.
               </span>
            </li>
            <li>
                <span>
                <a href= >"Class Based Programming as Syntantic Sugar"</a>
                Most of the time, "Object Oriented" actually means classes. Classes are nothting more than syntactic sugar, at least in statically typed languages such as Java and C++. Sugar is not useless, but seeing past it helps us understand classes better.
                </span>
            </li>
            <li> 
                <span>
                <a href= >"Taboo OO"</a>
                The term "OO" is so overloaded that we should stop using it. Better substitues are "classes" and "prototypes"
.               </span>
            </li>
            <li>
                <span>
                <a href= >"How Class Based Programming Sucks"</a>
                Classes are vastly sub-optimal. Functional programming is far better.
                </span>
            </li>
        </ul>
    </div>
    <footer>
        <p>Contact, suggestions: Send me and email at <a href="#">l@loup-vallant.fr</a></p>
            <p>Built with <a href="#">USSM</a></p>
    </footer>
</div> <!-- end of container -->

需要帮助使用display：inline-block并排放置div

1 个答案: