如何实现水平行显示?

htmlweb developmentfront end technology更新于 2024/6/19 22:36:17

本文将指导用户如何在 HTML 中实现水平行显示。这可以通过在设置样式时使用"display: inline"功能或使用表格行功能轻松实现。本文将演示如何将网页中的部分元素显示在同一行中。首先，我们将介绍将无序列表项显示在同一行中的方法。在第二个示例中，段落行也显示在同一行中。在第三个示例中，我们将使用不同大小的图像将段落行显示在同一行中。

示例 1:使用 HTML 将无序列表项显示在同一行中

设计步骤

步骤 1 − 创建 HTML 文件并开始编写代码。
步骤 2 − 创建 <center>
在 <body> 内创建一个 <div> 标签。
步骤 3 − 现在在 <center> 标签内，创建一个 <div> 标签，并将类名设置为"tab"。
步骤 4 − 创建一个 <style> 标签并指定 .tab 的样式。
步骤 5 − 尝试使用浅色背景色、1px 实线和深色边框、400px 宽度和 50px 高度。
步骤 6 − 为 <li> 标签创建样式，并使用"display: inline"和 somi。
步骤 7 − 现在在 div 标签内创建无序列表。在浏览器中打开 html 文件并检查结果。

使用的文件:HRowDisplay1.html

HRowDisplay1.html 的代码

<!DOCTYPE html>
<html>
<head>
   <title>Display in a horizontal row</title>
   <style>
      .tab {
         border: 1px solid #382d2d;
         background-color: #e0dbdb;
         width: 400px;
         height: 50px;
      }
      li {
         display: inline;
         word-spacing: 25px;
      }
   </style>
</head>
<body>
   <center>
      <h2>Display List Items in a horizontal row</h2>
      <div class="tab">
         <ul>
            <li>
               Name:-Hina
            </li>
            <li>
               Age:-40
            </li>
            <li>
               Lives_in:-UP
            </li>
         </ul>
      </div>
   </center>
</body>
</html>

示例 2:使用 HTML 在水平行中显示段落行

设计步骤

步骤 1 − 首先创建一个名为 HRowDisplay2.html 的文件，然后在其中编写代码。
步骤 2 − 要使项目居中，请在 <body> 内创建一个 <center> 标签。现在，在 <center> 标签内，对于容器，创建一个 <div> 标签。
步骤 3 − 现在，在 <div> 标签内，创建一个 <table> 标签，并将其类名为"tab"。
步骤 4 − 要设置样式，请使用 <style> 创建类标签。标签，然后指定 .tab 的样式。
步骤 5 − 使用值 #e0dbdb 作为背景色，边框为 1px 实线和深色，设置宽度为 600px，高度为 50px。
步骤 6 − 在 div 标签前创建四个段落标签，并在这些标签中编写文本内容。
步骤 7 − 创建 <tr> 标签，并在 <tr> 标签中创建四个 <th> 标签。现在将上面使用的相同 <p> 标签的副本放入每个 <th> 标签中。标签。
步骤 8 − 在浏览器中打开 html 文件并检查结果。

使用的文件:HRowDisplay2.html

HRowDisplay2.html 的代码:

<!DOCTYPE html>
<html>
<head>
   <title>Display in a horizontal row</title>
   <style>
      .tab {
         border: 1px solid #382d2d;
         background-color: #e0dbdb;
         width: 600px;
         height: 50px;
      }
   </style>
</head>
<body>
   <center>
      <h2>Displaying Lines</h2>
      <p>This is line One</p>
      <p>This is line Two</p>
      <p>This is line Three</p>
      <p>This is line Four</p>
      <div>
         <h2>Display Lines in a horizontal row</h2>
         <table class="tab">
            <tr>
               <th>
                  <p>This is line One</p>
               </th>
               <th>
                  <p>This is line Two</p>
               </th>
               <th>
                  <p>This is line Three</p>
               </th>
               <th>
                  <p>This is line Four</p>
               </th>
            </tr>
         </table>
      </div>
   </center>
</body>
</html>

示例 3:使用 HTML 在水平行中显示图像

步骤 1 − 创建一个名为 HRowDisplay3.html 的文件，并开始在其中编写代码。
步骤 2 − 要使 body 标签内的项目居中，请创建 <center> 标签。
步骤 3 − 还要创建一个 <div> 标签，并以"tab"作为其类名。
步骤 4 − 要为 .tab 类设置样式，请创建 <style>为此。
步骤 5 - 尝试使用十六进制颜色"#e0dbdb"作为背景色，边框采用 1px 纯色和深色，宽度为 80%，高度为 50%。
步骤 6 - 为 <img> 标签设置样式并使用"display: inline"功能。
步骤 7 - 现在在 div 标签内放置包含不同大小图片的 <img> 标签。在浏览器中打开 html 文件并检查结果。

使用的文件:HRowDisplay3.html

HRowDisplay3.html 的代码

<!DOCTYPE html>
<html>
<head>
   <style>
      .tab {
         border: 1px solid #382d2d;
         background-color: #e0dbdb;
         width: 80%;
         height: 50%;
      }
      img {
         display: inline;
      }
   </style>
</head>
<body>
<div></div>
<body>
   <center>
      <h2>Display Images in a horizontal row</h2>
      <div class="tab">
         <img src="https://www.cainiaomax.com/assets/questions/media/14186/play.jpg"   />
         <img src="https://www.cainiaomax.com/assets/questions/media/14186/play.jpg"  />
         <img src="https://www.cainiaomax.com/assets/questions/media/14186/play.jpg"  />
         <img src="https://www.cainiaomax.com/assets/questions/media/14186/play.jpg"  />
      </div>
   </center>
</body>
</html>