Question

所以我有这个html＆amp;我试图在同一行上的CSS代码。我很确定它们是块状的，这就是为什么它们不在同一条线上。我如何正确地让他们在网站上保持同一条线？很抱歉没有使用jsFiddle，我真的很努力。

我的第一次尝试：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
    <title>Product Showcase</title>
  </head>
  <body>
  <p id="Logo">VARGA NET</p>
      <ul id="navigation">
        <li>SPECIFICATIONS</li>
        <li>LOOK AT IT</li>
        <li>FEATURES</li>
        <li>FREE</li>
        <li>TESTIMONIALS</li>
        <li>HOME</li>
      </ul>
  </body>
</html>

CSS

body {
  background-image: url(Images/background.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

#Logo{
  color: White;
  font-size: 20px;
  font-weight: bold;
  font-family: sans-serif;
  padding-left: 60px;
  padding-top: 20px;
}

li{
  color: white;
  float: right;
  padding: 8px;
  display: inline;
  list-style: none;
}

正如你所看到的那样，他们不在同一条线上，所以我所做的就是把它们放在一个div中，这就是我带来的。他们在同一条线上，但我觉得我做得不好。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
    <title>Product Showcase</title>
  </head>
  <body>
          <div inline-block class="headerLogoAndMenu">
            <p id="Logo">VARGA NET</p>
            <ul id="navigation">
              <li>SPECIFICATIONS</li>
              <li>BUY NOW</li>
              <li>FEATURES</li>
              <li>PRICE</li>
              <li>TESTIMONIALS</li>
              <li>HOME</li>
            </ul>
          </div>
  </body>
</html>

CSS

.headerLogoAndMenu li{
  font-family: sans-serif;
  transition:0.5s;
  color: white;
  float: right;
  padding-right: 8px;
  padding-left: 8px;
  padding-top: 16px;
  display: inline;
  list-style: none;
}
.headerLogoAndMenu #Logo{
  font-family: sans-serif;
  transition:0.5s;
  color: white;
  float: right;
  display: inline;
  list-style: none;
}

Answer 1

这样做的方法......

＆＃13;

.headerLogoAndMenu {
  display: table;
}

.headerLogoAndMenu p {
  display: table-cell;
}

.headerLogoAndMenu ul {
  display: table-cell;
}

.headerLogoAndMenu ul li {
  display: table-cell;
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
    <title>Product Showcase</title>
  </head>
  <body>
    <div class="headerLogoAndMenu">
      <p id="Logo">VARGA NET</p>
      <ul id="navigation">
        <li>SPECIFICATIONS</li>
        <li>BUY NOW</li>
        <li>FEATURES</li>
        <li>PRICE</li>
        <li>TESTIMONIALS</li>
        <li>HOME</li>
      </ul>
    </div>
  </body>
</html>

＆＃13;

Answer 2

另一种方法

＆＃13;

.headerLogoAndMenu {
  display: flex;
}

.headerLogoAndMenu ul {
  display: flex;
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
    <title>Product Showcase</title>
  </head>
  <body>
    <div class="headerLogoAndMenu">
      <p id="Logo">VARGA NET</p>
      <ul id="navigation">
        <li>SPECIFICATIONS</li>
        <li>BUY NOW</li>
        <li>FEATURES</li>
        <li>PRICE</li>
        <li>TESTIMONIALS</li>
        <li>HOME</li>
      </ul>
    </div>
  </body>
</html>

＆＃13;

Answer 3

我使用flexboxes来布局徽标和菜单。垂直对齐已安排在中心。

.headerLogoAndMenu {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#navigation {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
}

.headerLogoAndMenu li {
  font-family: sans-serif;
  font-size: 10px;
  padding-right: 4px;
  padding-left: 4px;
  list-style: none;
}

#Logo {
  font-family: sans-serif;
}

<div class="headerLogoAndMenu">
  <p id="Logo">VARGA NET</p>
  <ul id="navigation">
    <li>SPECIFICATIONS</li>
    <li>BUY NOW</li>
    <li>FEATURES</li>
    <li>PRICE</li>
    <li>TESTIMONIALS</li>
    <li>HOME</li>
  </ul>
</div>

如何正确地使我的段落和列表内联？

3 个答案: