Question

对于我在学校的地理课程，我们正在针对不同的国家进行演示，其中一个选项是网站。我知道基本的HTML，但不是很多关于它的设计和显示方面。现在，我在很多网站上看到同一行上的文字时遇到了很多麻烦。我的代码目前看起来像这样：

<!DOCTYPE html>
    <html>
        <head>
            <title>Swedish Political Geography</title>
        </head>
        <body>
        <font face="verdana" size=“10”>Swedish Political Geography</font>
        <ul class="navigation">
            <ul><font face="verdana" size=“10”>Borders</font></ul>
            <ul><font face="verdana" size=“10”>Government</font></ul>
        </ul>
    </body>
</html>

我也无法将其他文件链接到此页面。如果您可以提供帮助，我们将不胜感激。这是我一直在尝试的代码：

<a href="borders.html">Borders</a>

我应该提一下，我一直在使用localhost服务器来测试我的代码，这就是我最终展示我的项目的方式。

编辑：为了澄清，我希望瑞典政治地理，边界和政府都在同一条线上。

Answer 1

ul - 是块元素，您需要将其转换为内嵌元素

显示：内联;

样式表中的

就像这样（或在你的css文件中）：

<!DOCTYPE html>
    <html>
        <head>
            <title>Swedish Political Geography</title>
            <style>
                ul.navigation {
                margin: 0;
                padding: 4px;
                }
                ul.navigation li {
                display: inline;
                margin-right: 5px;
                }
            </style>
        </head>
        <body>
        <font face="verdana" size=“10”>Swedish Political Geography</font>
        <ul class="navigation">
            <li><font face="verdana" size=“10”>Borders</font></li>
            <li><font face="verdana" size=“10”>Government</font></li>
        </ul>
    </body>
</html>

Answer 2

此解决方案需要一点CSS。我将从那开始。

如果目录中包含所有HTML文件，请继续创建名为index.css的CSS文件或任何您喜欢的文件，只要扩展名为CSS即可。在每个<head></head>文件的.html内放置此链接（如果您未使用index.css，则更改CSS文件的名称）：

<link rel="stylesheet" type="text/css" href="index.css">

关于您的HTML，<ul></ul>元素实际上是包含列表，每个项目都使用<li></li>项目定义，即使只有一个项目。知道了，它应该看起来更像这样：

<font face="verdana" size=“10”>Swedish Political Geography</font>
<ul class="navigation">
  <li><font face="verdana" size=“10”>Borders</font></li>
  <li><font face="verdana" size=“10”>Government</font></li>
</ul>

<ul>和<li>元素是块级元素，这意味着它们将占用可用宽度的100％。我们希望将它们更改为inline-block元素，这会使它们与文本内联，但仍然可以让它们将它们视为块级元素。

为此，请将其放入CSS文件中：

ul {
  display: inline-block;
  margin: 0;
  padding: 0;
}

...以及<li>：

li {
  display: inline-block;
}

它现在应该非常接近，但是你会注意到列表中的子弹仍然在附近。让我们删除那些：

ul {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

添加list-style-type: none;告诉<li>不要显示任何装饰功能。

您现在应该有一连串的文字！

示例：

＆＃13;

<font face="verdana" size=“10”>Swedish Political Geography</font>
<ul class="navigation">
  <li><font face="verdana" size=“10”>Borders</font></li>
  <li><font face="verdana" size=“10”>Government</font></li>
</ul>

＆＃13;

如何在HTML中的同一行放置文本？

2 个答案: