我对CSS相当陌生，我正在尝试创建第二个网站。我的问题是整个导航栏都是可单击的。另一方面，导航栏项目还可以，并且应该具有可点击的字段。
导航栏应设置在屏幕的右侧，并且应从左到右显示（作品集，关于我的信息，联系人和简历）。
我尝试弄乱“ display：inline”和其填充之间的设置，以查看是否能解决问题，但我仍然在整个导航栏中获得可点击的字段。我不知道如何解决此问题。
CSS：
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
body {
background-color: #fff;
overflow: hidden;
}
ul.menu {
padding: 20px 8px;
margin: auto 0px;
color: #fff;
font-family: arial, helvetica, sans-serif;
list-style: none;
cursor: default;
text-align: center;
}
.menu li {
display: inline;
}
.menu a {
text-align: center;
padding: 8px 25px;
background: #fff;
color: #272727;
text-decoration: none;
float: right;
border: 1px solid grey;
border-radius: 80px;
margin: 10px;
}
.menu a:hover {
background: #272727;
color: #fff;
transition: all 0.3s;
}
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Beta Portfolio</title>
<link rel="stylesheet" href="CSS/styles.css">
</head>
<body>
<nav class="main-nav">
<a href="index.html"></a>
<ul class="menu">
<li><a href="resources/stackoverflow.pdf">Resume</a></li>
<li><a href="index.html#main-footer">Contacts</a></li>
<li><a href="index.html#about-me">About Me</a></li>
<li><a href="index.html#projects">Portfolio</a></li>
</ul>
</nav>
</body>
</html>
同样，每个导航栏项目周围的字段都应该是可单击的，而不是整个导航栏部分。我知道jsfiddle网站，但是我尝试不太多改变自己的风格，因为我可能不喜欢最终结果。
[编辑] 这是经过修改的CSS代码，做了一些小的更改：
CSS（新）：
ul.menu {
padding: 20px 8px;
margin: auto 0px;
color: #fff;
font-family: arial, helvetica, sans-serif;
list-style: none;
cursor: default;
text-align: center;
float: right;
justify-content: space-between;
}
.menu li {
display: inline-block;
background: red;
}
.menu a {
text-align: center;
padding: 8px 25px;
background: #ccc;
color: #272727;
text-decoration: none;
border: 1px solid grey;
border-radius: 80px;
margin: 10px;
display: inline-block
}
答案 0 :(得分：1)
在锚点中单击填充。请改用保证金。显示：在浮动项目时，内联块是一团糟。
li a {margin: 15px; line-height: 40px;} /* just text clickable */
OR
li a {margin: 15px 0; padding: 0 15px; line-height: 40px;} /* text and left/right neighborhood clickable */
请参见此JSFiddle以了解不同之处。第一个是您的代码，第二个和第三个是我在答案中使用的变体。红色背景显示您可以点击的区域。
答案 1 :(得分：0)
根据社区的一些建议，最终的CSS代码如下：（与[EDIT]版本相同，但为防万一，我会在此处发布）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chapman Automotive Skills Assessment</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div class="brand">
<img src="img/Logo.png" alt="logo" class="logo">
<div class="comp-name">CHAPMAN</div>
</div>
<div class="nav-links">
<div class="link">Home</div>
<div class="link">Sales</div>
<div class="link">Blog</div>
<div class="link">Login</div>
</div>
</nav>
<header>
<div class="header-info">
<p>We are a company that does stuff.</p>
<p>Car and web stuff.</p>
</div>
</header>
<main>
<div class="col col-1">
<img src="img/car1.jpg" alt="car1">
<h3>Some Header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus tenetur mollitia officiis laudantium dolore ipsa.</p>
</div>
<div class="col col-2">
<img src="img/car2.jpg" alt="car2">
<h3>More Stuff</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, neque. Corporis quisquam eligendi libero omnis.</p>
</div>
<div class="col col-3">
<img src="img/car3.jpg" alt="car3">
<h3>Last Column</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, ipsa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quae, nihil error delectus voluptatum deserunt.</p>
</div>
</main>
<footer id="footer">
<div class="internal-links">
<h4>Internal Links</h4>
<div class="links">
<a href="#footer">Page One</a>
<a href="#footer">Another Page</a>
<a href="#footer">Sales Page</a>
<a href="#footer">Page Three</a>
<a href="#footer">Keep Going</a>
<a href="#footer">Last One</a>
<a href="#footer">Just Kidding</a>
</div>
</div>
<div class="form-wrap">
<form>
<label for="Name">Name</label>
<input type="text" id="Name">
<label for="Name">Address</label>
<input type="text" id="Address">
<label for="Name">City</label>
<input type="text" id="City">
<button type="submit">Submit Form</button>
</form>
<div class="dialog-wrap">
<dialog close>
<div class="name-field">Name:<span class="name">Seth</span></div>
<div class="name-field">Address:<span class="address">1013 N Arvada</span></div>
<div class="name-field">City:<span class="city">Mesa</span></div>
</dialog>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>答案 2 :(得分：-2)
您已将光标设置为可点击状态。
import { Injector } from "@angular/core";
import { Router } from "@angular/router";
import { OAuthService } from "../../oAuth/oAuth.service";
@Injectable()
export class ActivityManagerService {
constructor(
private injector: Injector,
private router: Router,
private oAuth: OAuthService
) {
}
goto(to: any[] | any, data?: any) {
if (!to) return;
if(to[0] === '/'){
to = to.substring(1);
}
this.canActivate(to, canIt => {
if (!canIt) {
to = "login";
}
if(typeof to === "string"){
to = to.split('/');
}
console.log('to, data: ',to, data)
if (data) {
this.router.navigate(to, data);
} else {
this.router.navigate(to);
}
});
}
canActivate(route, cb) {
this.oAuth
.authenticate(route.path)
.then((d: any) => {
console.log('d: ', d);
cb(!!d);
})
.catch(e => {
console.log(e, "Error, Chack login no actuive--------------------");
cb(false);
});
}
}
这将始终使它看起来像可单击的。只是完全摆脱它，或者改用default。
ul.menu {
cursor: pointer;
}
签出this可以查看不同类型的游标