HTML页面导航栏-带百分比的间距问题
HTML页面导航栏-带百分比的间距问题,html,css,Html,Css,^^上面的图片显示=900px，>900px，您可以非常简单地使用HTML，尤其是nav部分。下面是一个JSFIDLE： 我并没有完全重现你想做的事情，但你可以填写细节 以下是我使用的HTML： <header> <h1>Title</h1> <div class="login">Login</div> </header> <nav> <ul> <li&
^^上面的图片显示=900px，>900px，您可以非常简单地使用HTML，尤其是nav部分。下面是一个JSFIDLE： 我并没有完全重现你想做的事情，但你可以填写细节 以下是我使用的HTML：
<header>
<h1>Title</h1>
<div class="login">Login</div>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">KAMSC</a></li>
<li><a href="#">Staff</a></li>
<li><a href="#">Adminssions</a></li>
<li><a href="#">Curriculum</a></li>
<li><a href="#">Sizzling Summer</a></li>
<li><a href="#">KAMSC Connection</a></li>
<li><a href="#">Alumni</a></li>
</ul>
</nav>
文本对齐：justify导航ul：after阅读更多信息：请发布所有相关代码（包括html），因为这是一个百分比，所以无关紧要？？我希望距离是宽度的1/60，900是15px乘以10000%，而不是100%。这将给你1.666%没有任何意义的答案。现在甚至不显示标签，只需在括号中加载一秒钟，这真的很有帮助。是否有一种方法可以在列表周围放置一个div，以便在hover上添加边框？？您是希望在整个列表上悬停还是仅在特定链接上悬停？如果是特定的链接，那么只需在锚标记上添加一个悬停。像这样的？但我以前的做法是，当我将其悬停在块下方的水平线（或突出显示整个选项卡）上时，但通过此设置，我无法访问导航项，只能通过链接访问，该链接具有更小的边界框NVM，我让它工作。非常感谢你。很有帮助
<html>
<head>
<link rel="stylesheet" href="kamsc.css">
</head>
<body>
<div class="school-header">
<div class="nav">
<div class="nav-left">
<ul>
<a href="#">
<div class="nav-li-outer">
<li>
<img src="Logo-Test.png" width=600px style="vertical-align:middle">
</li>
</div>
</a>
</ul>
</div>
<div class="nav-right">
<ul>
<a href="#">
<div class="nav-li-outer">
<li>
Login
</li>
</div>
</a>
</ul>
</div>
</div>
</div>
<div class="link-header">
<div class="nav">
<div class="nav-left">
<ul>
<a href="#">
<div class="nav-li-outer">
<li>
Home
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
KAMSC
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
Staff
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
Admissions
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
Curriculum
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
Sizzling Summer
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
KAMSC Connection
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
Alumni
</li>
</div>
</a>
</ul>
</div>
</div>
</div>
</body>
</html>
<header>
<h1>Title</h1>
<div class="login">Login</div>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">KAMSC</a></li>
<li><a href="#">Staff</a></li>
<li><a href="#">Adminssions</a></li>
<li><a href="#">Curriculum</a></li>
<li><a href="#">Sizzling Summer</a></li>
<li><a href="#">KAMSC Connection</a></li>
<li><a href="#">Alumni</a></li>
</ul>
</nav>
header {
background: teal;
overflow: hidden;
padding: 2% 2%;
}
header h1 {
float: left;
margin: 0;
padding: 0;
}
header .login {
float: right;
}
nav {
background: lightgray;
padding: 2% 2%;
}
nav ul {
font-size: 0;
margin: 0;
padding: 0;
text-align: justify;
}
nav ul:after {
content: '';
display: inline-block;
width: 100%;
}
nav li {
display: inline-block;
font-size: 16px;
}