Question

我正在做一个学校项目，我必须在HTML和＆amp ;;做一个导航栏。 CSS。我有以下代码，但它没有像我希望的那样响应。

当我缩小屏幕时，文本会变得更加紧密。如何在p类之间添加固定空格或使用其他方法来解决此问题？

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Header</title> <!-- This is the page title -->
    <link href="style.css" rel="stylesheet" type="text/css"> <!-- This adds the stylesheet so that "style.css" can edit this page -->
    <meta content="Hugh Chalmers" name="author"> 
</head>
<body>
    <div class="header"> <!-- This will be the Navigation Bar part of the page. Currently, it is invisible, but the CSS will change that. -->
        <p class="text" id="home">Home</p>
        <p class="text" id="about">About Us</p>
        <p class="text" id="contact">Contact Us</p>
        <p class="text" id="products">Products</p>
        <p class="text" id="forums">Forums</p>
    </div> 
</body>
</html>

CSS：

.header {
    position: absolute;
    width: 100%;
    height: 10%;
    left: 0;
    top: 0;
    background-color: red;
}

.text {
    font-family: font-family: 'PT Sans',sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    position: absolute;
}

#home {
    position: absolute;
    left: 5%;
}

#about {
    position: absolute;
    left: 15%;
}

#contact {
    position: absolute;
    left: 27%;
}

#products {
    position: absolute;
    left: 40%;
}

#forums {
    position: absolute;
    left: 53%;
}

Answer 1

如果您的导航栏应该代表一个选项列表（实际上，这是导航栏的功能），那么在语义上使用它就更有意义了。由于订单并不重要，我们使用无序列表<ul>：

<div class="header">
    <ul>
        <li class="text" id="home">Home</li>
        <li class="text" id="about">About Us</li>
        <li class="text" id="contact">Contact Us</li>
        <li class="text" id="products">Products</li>
        <li class="text" id="forums">Forums</li>
    </ul>
</div>

然后，要水平显示，只需浮动它们或更改显示模式即可。我更喜欢后者：

.header ul li
{
    display: inline-block;
}

一个稍微调整过CSS版本的示例：https://jsfiddle.net/L0pb47ms/

Answer 2

您不应使用position:absolute来执行此操作，您可以在display:inline-block元素上使用p。

.header {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    background-color: red;
}

.text {
    font-family: font-family: 'PT Sans',sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    display: inline-block;
    text-align:center;
    padding: 5px;
}

您不必为每个人p设置样式。

JSFiddle

Answer 3

用这些

替换你的CSS样式

CSS：

.header {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    background-color: red;
}
.text {
    font-family: font-family: 'PT Sans',sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #fff;
}
.header p {
    display: inline-block;
    padding: 0 5px;
}

@media (max-width: 480px) {
  .text {
    font-size: 1em;
    font-weight: 350;
  }
 .header p {
    display: inline-block;
    padding: 4px 0;
  }
}

Answer 4

用以下内容替换你的html和css样式：

＆＃13;

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: red;
}

ul.topnav li {float: left;}

ul.topnav li a {
    display: block;
    font-size: 30px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

ul.topnav li a:hover:not(.active) {background-color: #111;}
ul.topnav li.right {float: right;}

@media screen and (max-width: 400px){
    ul.topnav li.right, 
    ul.topnav li {float: none;}
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul class="topnav">
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

＆＃13;

HTML＆amp; CSS导航栏错误

4 个答案: