使用css调整下划线和文本之间的距离

Question

我想在文本和下划线之间添加一些空格。但是当我尝试在底部添加一些边框时，它会占据我分辨率的100％宽度。 所以它看起来像这样：

这是我的css：

h1 { 
    font-size: 24pt;
    color: #279839;
    position: relative;
    text-decoration: none;
    padding-bottom: 5px;
    border-bottom: 1px solid #279839;
}

我的页面是多语言的，因此边框底部应与文本的宽度相同。

你能帮我解决这个问题吗？

Answer 1

您可以将display: inline-block;添加到<h1>，或者在inline ... span元素（例如h1） >

h1 {
  text-align: center;
}

h1 span { 
    font-size: 24pt;
    color: #279839;
    padding-bottom: 5px;
    border-bottom: 1px solid #279839;
}

<h1><span>hello</span></h1>
<h1><span>hello world</span></h1>
<h1><span>hello world and univers</span></h1>

Answer 2

将span标记放在h1

中

<h1 class="the-h1"><span class="the-span">商品</span></h1>

css

.the-h1 {
  text-align: center;
}
.the-span {
  display: inline-block;
  font-size: 24pt;
  color: #279839;
  position: relative;
  text-decoration: none;
  padding-bottom: 5px;
  border-bottom: 1px solid #279839;
}

Answer 3

步骤1：你需要进行H1显示：内联块;这样边框保持根据文本的宽度而不是窗口宽度。

步骤2：为了提供空间，您可以使用css伪元素

h1 { 
font-size: 24pt;
color: #279839;
position: relative;
text-decoration: none;
padding-bottom: 5px;
display:inline-block;
position:relative;
margin: 0 0 10px;
}
h1:after {
content:'';
position: absolute;
left:0;
right:0;
bottom:0;
height:1px;
background: #279839;
display: block;
}

Answer 4

如果您不想通过其他标记对其进行换行，请使用transform将h1标记与页面的center对齐，并将其display更改为{{ 1}}这仅适用于inline-block，

one h1 tag

h1 {
  font-size: 24pt;
  color: #279839;
  position: relative;
  text-decoration: none;
  padding-bottom: 5px;
  border-bottom: 1px solid #279839;
  display: inline-block; /*Add this*/
  left: 50%; /*Add this*/
  transform: translate(-50%, 0); /*Add this*/
}

Answer 5

默认情况下，您的h1标记是一个块元素，因此border-bottom遍历整个宽度是有意义的。您需要更改标题的display属性才能获得希望的结果。

h1 { 
    display: inline-block; /* most solid one; best choice */
    display: initial;      /* most safe one can easily be overwritten */
    display: inline-flex;  /* could be useful if people using flex-grids */
}

Answer 6

h1 { 
    display:Block;
    width: 25%
    position:relative;
    margin-right:auto;
    margin-left:auto;
    font-size: 24pt;
    color: #279839;
    position: relative;
    text-decoration: none;
    padding-bottom: 5px;
    border-bottom: 1px solid #279839;
}