css 具有不同格式的单词应保持内联

mnemlml8 于 2023-02-01 发布在其他

关注(0)|答案(4)|浏览(146)

当我想改变某个单词的样式时，它无法保持内联。如何解决？

p.SixtyFive {
  font-size: 20vw;
  text-indent: 0;
  display: block;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

<p class="Intro">This page has</p>
<p class="SixtyFive">all</p>
<p class="Intro"> you want.</p>

我试过不同的solutions。
另外，我尝试过用浏览器工具通过选择特定的元素来解决这个问题，这就是我如何获得text-indent属性下面的属性/特性的方法。

css

来源：https://stackoverflow.com/questions/75278705/word-with-different-format-should-stay-inline

4条答案

按热度按时间

zaq34kh61#

使用span标签（默认情况下是内联的），不要在span之前结束p标签（但只能在末尾），并删除display: block和css类规则中所有其他不必要的内容：

span.SixtyFive {
  font-size: 20vw;
}

<p class="Intro">This page has <span class="SixtyFive">all</span> you want.</p>

赞(0）回复(0）举报 2023-02-01

g52tjvyc2#

你需要添加display：inline到所有的段落元素
网页：

<p class="intro">This page has</p>
<p class="SixtyFive">all</p>
<p class="intro"> you want.</p>

CSS：

p.SixtyFive {
    font-size: 20vw;
    text-indent: 0;
    display: inline;
}
p.intro{
  display: inline;
}

赞(0）回复(0）举报 2023-02-01

t2a7ltrp3#

正如@Toastrackenigma正确指出的那样，您应该使用span标记;

span.SixtyFive {
  font-size: 20vw;
  text-indent: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

<span class="Intro">This page has</span>
<span class="SixtyFive">all</span>
<span class="Intro"> you want.</span>

赞(0）回复(0）举报 2023-02-01

hvvq6cgz4#

当使用display: inline时，需要在parent上使用它，即包含要内联的内容的元素。

p {
  display: inline;
}

p.SixtyFive {
    font-size: 20vw;
    text-indent: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

<p class="Intro">
  This page has</p><p class="SixtyFive">all</p><p class="Intro"> you want.
</p>

赞(0）回复(0）举报 2023-02-01

我来回答

css 具有不同格式的单词应保持内联

4条答案

相关问题

热门标签

最新问答