Question

并非我的所有文字都按照我想要的方式对齐我要在图像底部对齐的第二行，但我希望它位于第一行下方的下一行。我是所有这些CSS的新手，这个项目是我的历史课，所以一如既往地非常感谢帮助！

这是我的HTML：

<html>
    <head>
    <title>Biography</title>
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    </head>
    <a href = home.html>Home</a>
    <a href = bio.html>Biography</a>
    <a href = campaign.html>Campaign</a>
    <a href = pp.html>Political Platform</a>
    <body>
    <p>
        <img src= images/william.jpg/ height = 300 width = 300>
        Sir William Higgins was born on 02/02/1987. He was top of his class at Horn E.U.He was the number one draft choice for the MLB in 2000 and has won every golden globe award ever.
    </p>
    </body>
</html>

这是我的CSS样式表上的代码：

img {
    border: solid 2px black;
    vertical-align: text-top;
}
a {
    display: inline-block;
    font-family: curier;
}

p {
    vertical-align: text-top;
}

Answer 1

您的代码存在许多问题：

<a>代码必须位于<body>代码中。
<img>代码必须位于<p>。
为了分隔链接和图片，我输入了<br>。
所有属性必须必须是双引号。例如，在href属性上，网址必须为引号。

<强> Here is a working JSFiddle

以下是HTML应该是什么：

<html>
<head>
    <title>Biography</title>
    <link type="text/css" rel="stylesheet" href="stylesheet.css" />
</head>
<body>
    <a href="home.html">Home</a>
    <a href="bio.html">Biography</a>
    <a href="campaign.html">Campaign</a>
    <a href="pp.html">Political Platform</a>

    <br>

    <img src="images/william.jpg/" height="300" width="300">
    <p>Sir William Higgins was born on 02/02/1987. He was top of his class at Horn E.U.He was the number one draft choice for the MLB in 2000 and has won every golden globe award ever.</p>
</body>

你的CSS很好。

如果您还想让自己的链接相互叠加，请在每个<br>之后添加</a>。

编辑：要使链接显示在彼此之上，最好将链接放入<nav> tag这样的内容：

<nav>
    <li><a href="home.html">Home</a></li>
    <li><a href="bio.html">Biography</a></li>
    <li><a href="campaign.html">Campaign</a></li>
    <li><a href="pp.html">Political Platform</a></li>
</nav>

然后使用此CSS设置样式：

nav li {
    display: block;
}

nav {
    list-style-type: none;
}

<强> JSFiddle with nav tag

Answer 2

如上所述，您的标记无效。

如果您希望链接位于彼此之下，只需在每个链接后插入<br>

即可

对齐元素CSS

2 个答案: