个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
所以在我的屏幕上，导航栏几乎延伸到屏幕的尽头，而在更大的屏幕上，它没有达到预期的限制我是创建网站的初学者，所以我想寻求帮助这里的问题是什么.. 我尝试使用宽度百分比但是当我缩小屏幕时内容变得困惑我不想要我想要一个像 ebay 那样的非响应菜单我猜。
.search [type=text]{
width: 30em;
position:absolute;
top:6%;
left:15%;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 1em;
background-color: white;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
}
.Navigation{
font-family:Arial;
font-size:1em;
width:80.9em;
position:fixed;
top:6em;
left:2em;
list-style-type: none;
padding:0%;
border-bottom: 1px solid grey;
border-top: 1px solid grey;
}
.Navigation a {
float: left;
}
.Navigation li a{
display: inline-block;
color: #484849;
text-align: center;
padding: 0.7em 4.93em;
text-decoration: none;
}
.Navigation a:hover {
border-bottom: 1px solid red;
}
/* class="active" */
.active {
border-top: 1px solid red;
border-bottom: 1px solid red;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<style type="text/css">
.logo{
position:absolute;
top:1em;
left:3em;
}
</style>
</head>
<body>
<a class="logo" href="index.php"><img src="logo.png" alt="logo Icon" height="80"></a>
</body>
<div class="wrapper">
<ul class="Navigation">
<li><a href="Mobiles.php">Mobiles</a></li>
<li><a href="Vehicles.php">Vehicles</a></li>
<li><a href="Games.php">Games</a></li>
<li><a href="Clothes.php">Clothes</a></li>
<li><a href="Accessories.php">Accessories</a></li>
<li><a href="Other.php">Other</a></li>
</ul>
</div>
<form class="search">
<input type="text" name="search" placeholder="Search..">
</form>
</body>
</html>
</html>最佳答案
看起来你已经将导航栏的宽度设置为 width:80.9em;
em是一个计量单位，是'1M字符的宽度'所以基本上你将宽度设置为 80.9 M 的宽度。如果你希望它是一个百分比，你应该使用 width: 80%这将使 navebat 占用父级 div 宽度的 80%。
编辑-注意到您提到使用 percetage 会使它在较小的显示器中困惑。您可以使用 min-width 来确保您的最小宽度足以容纳您的文本。您还可以使用 @media 查询来设置页面在不同显示尺寸下的显示方式。您可以在此处阅读更多信息- https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
关于html - 导航菜单在其他屏幕上看起来较小的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42460603/
25
4
0
我正在尝试执行 vagrant up 但一直遇到此错误: ==> default: IOError: [Errno 13] Permission denied: '/usr/local/lib/pyt
我在容器 div 中有一系列动态创建的不同高度的 div。 Varying text... Varying text... Varying text... Varying text.
通过 cygwin 运行 vagrant up 时遇到以下错误。 stderr: /bin/bash: /home/vagrant/.ansible/tmp/ansible-tmp-14872260
今天要向小伙伴们介绍的是一个能够快速地把数据制作成可视化、交互页面的 Python 框架：Streamlit，分分钟让你的数据动起来！ 犹记得我在做机器学习和数据分析方面的毕设时，
我是 vagrant 的新手，正在尝试将第二个磁盘添加到我正在用 vagrant 制作的虚拟机中。 我想出了如何在第一次启动虚拟机时连接磁盘，但是当我关闭机器时 然后再次备份(使用 'vagrant
我是一名优秀的程序员,十分优秀！