html – 我应该如何使用CSS在文本和边框之间添加一些空格
发布时间:2020-12-14 18:44:33 所属栏目:资源 来源:网络整理
导读:我是编程新手,也是 HTML的初学者.我正在乱搞一个无序的列表来制作一个导航页面,我遇到了一个我无法解决的问题.单词周围的每个边框都非常封闭,我不知道如何使边框内的区域更大,这意味着我希望边框离这个单词更远.我知道它看起来很糟糕,但我真的只是专注于让它
我是编程新手,也是
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; } Demo 此外,你可以写边框相同的东西: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 */ } Refactored Demo (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |