HTML＆CSS导航栏错误

我正在做一个学校项目，我必须在HTML & CSS中创建导航栏。我有以下代码，但它不像我希望的那样快速响应。HTML＆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%; 
}

来源

2016-10-13 Hugh Chalmers

这当你的页面增长时，绝对定位将会变成真正的熊。我肯定会建议考虑少做一些手动的事情，页面可以根据一些温和的规则自然地流动你的内容。 –

你有真正凌乱的CSS样式 –

，则不应使用position:absolute要做到这一点，你可以在p元素使用display:inline-block。

.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

来源

2016-10-13 19:26:10 xort

这些

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; 
    } 
}

来源

2016-10-13 19:31:39

我喜欢这个，但是随着屏幕尺寸减小，列表项消失。我将如何解决这个问题？ –

您需要了解[媒体查询]（https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries）我还使用媒体查询编辑了我的答案，以解决您的问题@HughChalmers –

[这]（https://css-tricks.com/snippets/css/media-queries-for-standard-devices/）是一个很好的资源，可以为每个设备专门查找需要指定的大小。但是，我几乎总是只有一种尺寸;它真的取决于你的html和css的结构以及你正在使用的定位，单位等等。 – vladdobra

如果你的导航栏应该代表的选项列表（其中，真的，什么是导航栏确实），那么它在语义上更有意义地使用，以及列表。由于订单其实并不重要，我们会使用一个无序列表，<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/

来源

2016-10-13 19:38:59

与这些更换你的HTML和CSS样式：

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;} 
 
}

<!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>

来源

2016-10-13 20:40:22

HTML＆CSS导航栏错误

回答

相关问题