堆栈内存溢出
  简体   繁体   English

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

[英]How should I add some space between the text and the border using CSS

 原文  2013-12-31 06:05:23  3   9    html/ css

问题描述

I'm pretty new to programming and a complete beginner with HTML. 我是编程新手，也是HTML的初学者。 I was messing around with an unordered list to make a semblance of a navigation page, and I've had a problem I can't fix. 我正在乱搞一个无序的列表来制作一个导航页面，我遇到了一个我无法解决的问题。 Each border around the words are very closed in, and I have no idea how to make the area inside the borders bigger meaning I want the border to be farther away from the word. 单词周围的每个边框都非常封闭，我不知道如何使边框内的区域更大，这意味着我希望边框离这个单词更远。 I know it looks horrible, but I'm really just focused on making it work properly rather than making it look good. 我知道它看起来很糟糕，但我真的只是专注于让它正常工作而不是让它看起来很好。 Any help would be great, thanks! 任何帮助都会很棒，谢谢！

Here is my 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>

And this is my CSS: 这是我的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;

}

9 个解决方案

解决方案1
 7 已采纳  2013-12-31 06:08:47

If you want to have some space between the words and the border, than you need to use padding property for that 如果你想在单词和边框之间留出一些空间，那么你需要使用padding属性 

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

Demo 演示

Also, you can write the same thing as border: 1px solid green; 此外，你可以写border: 1px solid green;相同的东西border: 1px solid green; which is nothing but the border shorthand. 这只不过是border速记。

Also, you told us that you are a fresher, make sure you reset the default margin and padding which are applied by the browser by using 另外，您告诉我们您更新鲜，请确保重置浏览器使用的默认margin和padding 

* {
   margin: 0;
   padding: 0;
}

Or by using CSS Reset Stylesheet so that your menu styles position stays consistent across the browsers. 或者使用CSS重置样式表，以便您的菜单样式位置在浏览器中保持一致。

Lastly, you do not need to call classes on each of your element, you can leave it upto CSS selectors to select them... So get rid of all the classes, and just assign a class to the parent element, and use the selectors below.. 最后，你不需要在你的每个元素上调用类，你可以把它留给CSS选择器来选择它们......所以去除所有的类，只需将一个类分配给父元素，然后使用选择器下面..

Am assigning class to ul which is main_navigation so now we will select all the first level li using 我将类分配给ul ，这是main_navigation所以现在我们将选择所有第一级li使用 

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

And to target direct a inside those li we will use 并针对直接a的内li ，我们将使用 

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

Refactored Demo 重构演示

解决方案2
 3  2013-12-31 06:09:16

Just add padding in NavItem 只需在NavItem添加padding 

.navitem
{
    color: white;
    text-decoration: none;  
    border-style: solid;
    border-color: green;
    padding: 5px 10px; //1st 5px is for Height, 2nd 10px is for Width adjust it for your need
}

解决方案3
 2  2013-12-31 06:09:13

Add following in your css 在你的css添加以下内容 

ul li a {
   padding:10px;
}

解决方案4
 2  2013-12-31 06:14:16

add following in your css 在你的CSS中添加以下内容 

ul li a
{
   padding : 10px;
}

or 要么

you can set your class as 你可以把你的班级设为 

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

解决方案5
 1  2013-12-31 06:08:46

Just add some padding to the list items 只需在列表项中添加一些填充 

.navitem {
   padding: 5px;
}

解决方案6
 1  2013-12-31 06:12:46

Update css with 用css更新css 

.navitem {
    color: white;
    text-decoration: none;
    border-style: solid;
    border-color: green;
    padding: 5px 10px; 
    // it specified padding of 5px to top and bottom and 10px to left and right
}

you can also use padding-top, padding-left, padding-right, padding-bottom individually also as per your requirement 您也可以根据您的要求单独使用padding-top, padding-left, padding-right, padding-bottom

Demo 演示

解决方案7
 1  2013-12-31 06:17:44

.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;
}

解决方案8
 1  2013-12-31 06:44:37

In order to manipulate each list-item as a box, you need to put each <li> item into a <div> . 为了将每个列表项操作为一个框，您需要将每个<li>项放入<div> 。 A <div> works as a container, or as a box. <div>用作容器或盒子。 You can then specify height, width, text alignment, borders, etc. for it. 然后，您可以为其指定高度，宽度，文本对齐方式，边框等。 So, your HTML should look like this: 因此，您的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>

Whereas your CSS could be: 而你的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;

}

解决方案9
 0  2013-12-31 06:12:48

Change anchor display to inline-block and add some padding. 将锚显示更改为内联块并添加一些填充。 

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

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何仅使用 html 在表格边框和文本之间添加空格？ - how can i add space between table border and text using html only? 在 css 中使用 flex 调整文本和按钮边框之间的间距 - adjust the space between text and button border using flex in css 如何在css中相同文本的两行之间提供一些空间 - How to provide some space between two lines of same text in css 我怎么能用CSS覆盖边框的文字？ - How can I have some text overlaying a border with CSS? 我的文本和边框之间的空间有问题 - I have a problem with space between text and border CSS：如何删除图像和边框之间的空间？ - CSS: How to remove space between image and border? 文字和边框之间的空间 - Space between text and border 如何删除INSIDE CSS边框的空格？ 我希望边框在文本周围很紧 - How do I remove white space INSIDE CSS border? I want the border to be tight around the text 如何在css中的边框后添加空间 - How to add space after border in css CSS样式在文本之前添加一些空间 - css style for add some space before text
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM