Question

＆＃13;

* { 
    background-color: yellowgreen;
}
  		
h1 {
    text-align: center;
    display: block;
    background-color: yellow;
    border: 3px solid red;
    border-radius: 25px;
}

＆＃13;

<h1> This is Main website </h1>

＆＃13;

是否可以将黄色仅围绕文本而不是整行？

Answer 1

您只需将属性display: block更改为display: inline-block，它就会按照您希望的方式运行。试试这段代码。

＆＃13;

h1 {
  text-align: center;
}

h1 span {
  display: inline-block;
  background-color: yellow;
  border: 3px solid red;
  border-radius: 25px;
}

＆＃13;

<h1> <span> This is Main website </span> </h1>

＆＃13;

Answer 2

对span的文字使用display: inline-block标记（这也允许您将文字保持居中，并使边框跨越整个宽度）

如果需要，可以使用padding设置稍微扩展黄色区域

＆＃13;

* {
  background-color: yellowgreen;
}

h1 {
  text-align: center;
  display: block;
  border: 3px solid red;
  border-radius: 25px;
}

h1 span {
  display: inline-block;
  background-color: yellow;
  padding: 0 10px;
}

＆＃13;

<h1> <span> This is Main website </span> </h1>

＆＃13;

是否有可能只使黄色背景环绕＆＃34;这是主要网站＆＃34;字？

2 个答案: