Question

我是编程的新手，也是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;

}

Answer 1

在css

中添加以下内容

ul li a {
   padding:10px;
}

Answer 2

在你的css中添加以下内容

ul li a
{
   padding : 10px;
}

或

您可以将班级设置为

.navitem
{
    width:100px;(set width and height as you wish)
    height:100px;
    color: white;
    text-decoration: none;  
    border: 1px solid green;
}

Answer 3

只需在列表项中添加一些填充

.navitem {
   padding: 5px;
}

Answer 4

.wrap
{
    width: 1000px;
    height: 800px;
    margin: auto;
    font-family: sans-serif;
    text-align: center;
}

.navigation
{
    display: inline;
    list-style: none;
    padding-right: 50px;

}

.navitem
{

    padding: 5px;
}

Answer 5

为了将每个列表项操作为一个框，您需要将每个<li>项放入<div>。 <div>可用作容器或盒子。然后，您可以为其指定高度，宽度，文本对齐方式，边框等。因此，您的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>
    <div class="box">
    <li class="navigation"><a class="navitem" href="#"> Blog </a></li>
    </div>
    <div class="box">
    <li class="navigation"><a class="navitem" href="#"> Facebook </a></li>
    </div>
    <div class="box">
    <li class="navigation"><a class="navitem" href="#"> Twitter </a></li>
    </div>
    <div class="box">
    <li class="navigation"><a class="navitem" href="#"> About </a></li>
    </div> 
</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;

}

li.navigation
{
text-align:center;
}

.navitem
{
color: white;
text-decoration: none;  
}

.navitem:hover 
{
color: 339900;
border-color: 339900;

}

div.box
{
height: 25px;
width: 100px;
border: 1px solid;
border-color: green;
display:inline-block;
padding: 20px;
margin: 20px;

}

Answer 6

将锚显示更改为内联块并添加一些填充。

.navitem
{
    color: white;
    text-decoration: none;  
    border-style: solid;
    border-color: green;

   display:inline-block;
   padding:7px 15px;
}

我应该如何使用CSS在文本和边框之间添加一些空格

6 个答案:

将锚显示更改为内联块并添加一些填充。