如何将文本放在HTML中的同一行上?

在学校我的地理课,我们在不同的国家和其中的一个选项进行演示是一个网站。我知道基本的html,但不是很多关于它的设计和显示方面。现在,我在许多网站上看到了在同一行上获取文本的许多麻烦。我的代码目前看起来像这样:如何将文本放在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> 

我要指出,我一直在使用本地主机服务器来测试我的代码,这是我怎么会最终提出我的项目。

编辑:为了澄清,我想瑞典政治地理学,边框和政府都将在同一行。

回答:

你需要CSS的一点点这种解决方案。我会从那开始。

如果您有目录中的所有HTML文件,继续前进,创建一个名为index.css或任何你喜欢一个CSS文件,只要扩展名是CSS。里面每个.html文件的<head></head>把这个链接(改变你的CSS文件的名称,如果你没有使用index.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>不显示任何一种装饰功能。

你现在应该有一个连续的文本行!

实施例:

<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 - 是一个块元件,就需要把它转化为直列元件

显示:内联;

在样式就像这样(或者你的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>

以上是 如何将文本放在HTML中的同一行上? 的全部内容, 来源链接: utcz.com/qa/258078.html

回到顶部