问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

我正在弄乱一个无序列表来制作一个导航页面的外观，但我遇到了一个我无法解决的问题。单词周围的每个边框都非常封闭，我不知道如何使边框内的区域更大，这意味着我希望边框离单词更远。

我知道它看起来很糟糕，但我真的只是专注于让它正常工作而不是让它看起来不错。

这是我的 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;
}

原文由 Daas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcss
阅读 318
2 个回答
得票最新
社区维基
1
✓ 已被采纳

如果你想在单词和边框之间留出一些空间，那么你需要使用 padding 属性

.navitem {
    color: white;
    text-decoration: none;
    border-style: solid;
    border-color: green;
    padding: 5px;
}

演示

此外，您可以编写与 border: 1px solid green; 相同的内容，它只不过是 border 速记。

另外，你告诉我们你是一名 新生。确保您 margin 了 padding 器通过使用

* {
   margin: 0;
   padding: 0;
}

或者通过使用 CSS Reset Stylesheet 使您的菜单样式位置在浏览器中保持一致。

最后，你不需要在你的每个元素上调用类，你可以将它留给 CSS 选择器来选择它们……所以摆脱所有的类，只为父元素分配一个类，并使用下面的选择器..

我正在将类分配给 ul main_navigation 所以现在我们将选择所有第一级 li 使用

.main_navigation > li {
   /* Target direct child to .main_navigation */
}

并直接瞄准 a 在那些 li 我们将使用

.main_navigation li a {
    /* Target direct child to .main_navigation > li */
}

重构演示

原文由 Mr. Alien 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

只需在 padding NavItem ：

 .navitem
{
    color: white;
    text-decoration: none;
    border-style: solid;
    border-color: green;
    padding: 5px 10px; // The first 5px is for Height, and the second 10px is for Width. Adjust it for your needs.
}

原文由 Kirk 发布，翻译遵循 CC BY-SA 4.0 许可协议

查看全部 2 个回答
推荐问题