Question

我是网络开发的新手，我正在尝试创建此页面作为练习。 original page 这是我的代码

＆＃13;

<body bgcolor="white" <div width=1030px height=150px style="color: white;background-color:black ">
  <p><i>DUNUKA</i></p>
  <nav align="right">
    <a href=" indexOld.html " style="text-decoration: none;color: white ">PORIFPLIO|</a>
    <a href="about.html " style="text-decoration: none ;color: white ">ABOUT|</a>
    <a href="contact.html " style="text-decoration: none;color: white ">CONTACT|</a>
  </nav>
  <br>
  </div>
  <div style="background-color: grey " width=1020px height=100px>
    <br>
    <p align="center "> Protfolio</p>
    <br>
    <hr />
    <br>
  </div>

  <div height=800px width=1 010px>
    <table border="0px " cellspacing="0px " bgcolor="white " width="1000px " height="320px ">
      <tr align="center ">
        <td><img src="p1.png " width="150px " height="130px " /></td>
        <td><img src="p3.png " width="150px " height="130px " /></td>
        <td><img src="p6.png " width="150px " height="130px " /></td>
      </tr>
      <tr align="center ">
        <td><img src="p2.png " width="150px " height="130px " /></td>
        <td><img src="p4.png " width="150px " height="130px " /></td>
        <td><img src="p6.png " width="150px " height="130px " /></td>
      </tr>
    </table>
  </div>

  <div style="color: white;background-color: black " align="center " width=1020px height=200px>
    <br />
    <p>@All rights received</p>
    <img src="google_plus_img.png " height="15px " width="15px " />
    <img src="facebook_img.png " height="15px " width="15px " />
    <img src="twitter_img.png " height="15px " width="15px " />
    <img src="linkedin_img.png " height="15px " width="15px " />
    <br />
    <br />
  </div>
</body>

＆＃13;

这就是我创建的页面的样子 my page

在原始图像中，文本DINUKA和链接PORTFOLIO，ABOUT，CONTACT出现在同一行（在页面的同一级别），但在我的页面上它们出现在两行上。如何使它们出现在同一条线？我是网络开发的新手

Answer 1

1）在基础级别，您可以使用breakline。 <br/>

2）您可以在div中使用align:right CSS属性。

3）您可以轻松地开始在代码中使用Bootstrap-3/4，这将减轻您的大量任务。

链接：https://getbootstrap.com/

Answer 2

我建议不要在HTML中编写CSS（你应该制作一个不同的CSS表并链接到它），但这里有一个快速修复:)

Check it out here

<div style="color: white;background-color:black;height: 50px;">
<div id="navBarContent" style="line-height: 40px; padding: 5px 10px 5px 10px; ">
    <p style="display: inline-block; margin: 0; ">
        <i>DUNUKA</i>
    </p>

    <nav align="right" style="display: inline-block; float: right;">
        <a href="indexOld.html" style="text-decoration: none;color: white">PORIFPLIO|</a>
        <a href="about.html" style="text-decoration: none ;color: white">ABOUT|</a>
        <a href="contact.html" style="text-decoration: none;color: white">CONTACT|</a>
    </nav>
</div>

我建议您在使用CSS时熟悉Bootstrap，它将使您的整个网页设计体验变得更加轻松:) Get Bootstrap Here

Answer 3

在您的代码更改中

<p><i>DUNUKA</i></p>
<nav align="right">

到

<span><i>DUNUKA</i></span>
<nav style="display: inline-block; float: right;>

如何使用html在一行上编写单独的内容？

3 个答案: