css如何使下划线位置远,使用css调整下划线和文本之间的距离

6 个答案:

答案 0 :(得分：2)

您可以将display: inline-block;添加到

，或者在inline ...span元素(例如h1) >

h1 {

text-align: center;

}

h1 span {

font-size: 24pt;

color: #279839;

padding-bottom: 5px;

border-bottom: 1px solid #279839;

}

hello

hello world

hello world and univers

答案 1 :(得分：2)

将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;

}

答案 2 :(得分：1)

步骤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;

}

答案 3 :(得分：1)

如果您不想通过其他标记对其进行换行，请使用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*/

}

答案 4 :(得分：1)

默认情况下，您的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 */

}

答案 5 :(得分：0)

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;

}