如何将文本放在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>

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

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

来源

2017-12-02 Harry Potter

对于启动它必须是Borders不Borders – Radu

你需要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>

来源

2017-12-02 20:35:54

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>

来源

2017-12-02 20:14:50 jlemon

想所有要在同一行 - 添加'显示：内联;''进ul.navigation block' – jlemon

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

回答

相关问题