我是编程新手,也是
HTML的初学者.我正在乱搞一个无序的列表来制作一个导航页面,我遇到了一个我无法解决的问题.单词周围的每个边框都非常封闭,我不知道如何使边框内的区域更大,这意味着我希望边框离这个单词更远.我知道它看起来很糟糕,但我真的只是专注于让它正常工作而不是让它看起来很好.任何帮助都会很棒,谢谢！
这是我的HTML：
<!doctype=html>
<html>
<head>
<Meta charset="utf-8" />
<title> Test Title </title>
<link rel="stylesheet" href="../CSS/style.css" />
</head>
<body>
<div class="wrap">
<h1 class="test"> Blah Blah </h1>
<ul>
<li class="navigation"><a class="navitem" href="#"> Blog </a></li>
<li class="navigation"><a class="navitem" href="#"> Facebook </a></li>
<li class="navigation"><a class="navitem" href="#"> Twitter </a></li>
<li class="navigation"><a class="navitem" href="#"> About </a></li>
</ul>
</div>
</body>
</html>
这是我的CSS：
.wrap
{
width: 1000px;
height: 800px;
margin: auto;
background-color: black;
color: white;
font-family: sans-serif;
text-align: center;
}
.navigation
{
display: inline;
list-style: none;
padding-right: 50px;
}
.navitem
{
color: white;
text-decoration: none;
border-style: solid;
border-color: green;
}
.navitem:hover
{
color: 339900;
border-color: 339900;
}
解决方法
如果你想在单词和边框之间留出一些空间,那么你需要使用填充属性
.navitem {
color: white;
text-decoration: none;
border-style: solid;
border-color: green;
padding: 5px;
}
此外,你可以写边框相同的东西：1px solid green;这只不过是边界速记.
另外,您告诉我们您更新鲜,请确保重置浏览器使用的默认边距和填充
* {
margin: 0;
padding: 0;
}
或者使用CSS Reset Stylesheet,以便您的菜单样式位置在浏览器中保持一致.
最后,你不需要在你的每个元素上调用类,你可以把它留给CSS选择器来选择它们……所以去除所有类,只需将一个类分配给父元素,然后使用选择器下面..
我将类分配给ul,这是main_navigation所以现在我们将选择所有第一级li使用
.main_navigation > li {
/* Target direct child to .main_navigation */
}
并且直接指向我们将使用的那些李
.main_navigation li a {
/* Target direct child to .main_navigation > li */
}
