CSS：设置CSS行[重复]

Posted 2023-03-06

【中文标题】CSS：设置CSS行[重复]

【英文标题】：CSS : set the CSS line [duplicate]

【发布时间】：2018-06-03 18:50:33

【问题描述】：

.banner-bottom h2 
  font-size: 2em;
  color: #372568;
  position: relative;
  padding-bottom: 1em;
  text-align: center;


.banner-bottom h2:before 
  content: '';
  position: absolute;
  top: 25%;
  left: 25%;
  background: #372568;
  height: 2px;
  width: 8%;


.banner-bottom h2:after 
  content: '';
  position: absolute;
  top: 25%;
  right: 25%;
  background: #372568;
  height: 2px;
  width: 8%;

<div class="banner-bottom">
  <div class="container">
    <h2>Special Promo</h2>
    <h2>Promo</h2>
    <div>
      <div>

结果：

如何根据写法的长度对它的行进行css如下：

【问题讨论】：

我没有看到与您的屏幕截图相同的结果。我得到i.stack.imgur.com/2IcrP.png。

【参考方案1】：

试试这个：

.banner-bottom h2 
  font-size: 2em;
    color: #372568;
    padding-bottom: 1em;
    text-align: center;


.line:before 
  content: '';
    display: inline-block;
    background: #372568;
    height: 2px;
    width: 8%;
    margin: 10px;


.line:after 
  content: '';
    display: inline-block;
    background: #372568;
    height: 2px;
    width: 8%;
    margin: 10px;

.promo 
  display: inline-block;

<div class="banner-bottom">
  <div class="container">
    <h2><span class="line"><span class="promo">Special Promo</span></span></h2>

    <h2><span class="line"><span class="promo">Promo</span></span></h2>
  <div>
<div>

【讨论】：

在这里<hr> 会比<span> 更合适吗？

@Bergi：不，因为a heading cannot contain an hr。 hr 仅用于在无法使用分段元素和标题时用作分段分隔符。出于显而易见的原因，它作为文字“水平规则”的使用已被弃用。

@BoltClock 哎呀，我怎么能错过它被放置在 inside 标题中。谢谢！

【参考方案2】：

将display 属性值设置为inline-block 是很好的选择，因为@Vinothin 已为您解答。这是您可以使用的另一个技巧。

使用transform 属性将帮助您在使用绝对位置时。

.banner-bottom h2 
  font-size: 2em;
  color: #372568;
  position: relative;
  padding-bottom: 1em;
  text-align: center;


.banner-bottom h2:before 
  content: '';
  position: absolute;
  top: 25%;
  transform: translateX(-100%);
  /* no left value is required */
  background: #372568;
  height: 2px;
  width: 8%;


.banner-bottom h2:after 
  content: '';
  position: absolute;
  top: 25%;
  /* no right value is required */
  background: #372568;
  height: 2px;
  width: 8%;

<div class="banner-bottom">
  <div class="container">
    <h2>Special Promo</h2>
    <h2>Promo</h2>
  </div>
</div>

如果您需要单词前后的间距，则可以通过增加或减少翻译值来调整它。

---

使用transform 属性将来也会对您有很大帮助。假设您有一个居中的列表，并且您需要将图标左中心定位到列表中，那么 transform 只会采用这种方式。我已经告知了这个技巧，因为我之前也遇到过类似的问题。

希望这会有所帮助！

【讨论】：

谢谢你帮了我很多:))

这是我的荣幸。