html - CSS 挑战，我可以在不引入更多 HTML 的情况下做到这一点吗？

Question

想象一下，我有任何带有文本的块或内联块。就像一个段落或里或任何东西。如果该标签具有“分隔符”类，我希望它如下所示：

所有内容都居中（text-align:center; 就足够了）。这是棘手的部分：在居中内容的两侧，会出现一条（垂直居中的）线。

下图说明了我的想法：

我希望它看起来像的近似示例（尽管这是使用文本...

如果我必须介绍更多 HTML，那就忘了它 - 不感兴趣。

我是一个长期的 CSS 用户，但我无法弄清楚这个......还有其他人有想法吗？尽管我很喜欢它，但最好不要使用 CSS3（对于工作......由于兼容性，不能使用新东西）..

示例问题：<p class="separator">CENTRE ME</p>

score 19 · Accepted Answer

这适用于 Firefox：

.separator {
    text-align: center;
    height: 0.5em;
    border-bottom: 2px solid black;
    margin-bottom: 0.5em;
}
.separator:first-line {
    background-color: white;
}

JSFiddle 演示

score 3 · Accepted Answer

我开发了一个不依赖 a 的解决方案background: white，也就是说，您可以看到分隔符文本背后的内容。只需运行示例，您就会看到：

忽略此插图中所有那些杂乱无章的选项卡……这是一个 CSS 示例，而不是组织示例。

.separator>*{
  display: inline-block;
  vertical-align: middle;
}
.separator {
    text-align: center;
    border: 0;
    white-space: nowrap;
    display: block;
    overflow: hidden;
    padding: 0;
    margin: 0;
}
.separator:before, .separator:after {
    content: "";
    height: 2px;
    width: 50%;
    background-color: gray;
    margin: 0 5px 0 5px;
    display: inline-block;
    vertical-align: middle;
}
.separator:before {
    margin-left: -100%;
}
.separator:after {
    margin-right: -100%;
}

<div class="texture texture1 dark-theme">
  <p class="separator">Text</p>
  <br/>
  <p class="separator"><span>Text with<br/>multiple lines</span></p>
</div>
<div class="texture texture2 dark-theme">
  <p class="separator">Text</p>
  <br/>
  <p class="separator"><span>Text with<br/>multiple lines</span></p>
</div>
<div class="texture texture3 dark-theme">
  <p class="separator">Text</p>
  <br/>
  <p class="separator"><span>Text with<br/>multiple lines</span></p>
</div>
<div class="texture texture4 light-theme">
  <p class="separator">Text</p>
  <br/>
  <p class="separator"><span>Text with<br/>multiple lines</span></p>
</div>

<style>
  
/**

STYLES TO MAKE THE BACKGROUND HAVE PATTERNS WHICH ARE NOT SOLID WHITE,
SO THAT YOU CAN SEE THAT IT IS VISIBLE BEHIND THE SEPARATOR.

**/

.light-theme .separator:before, .light-theme .separator:after {
  background-color: black;
}
.light-theme .separator, .light-theme .separator {
  color: black;
}
.dark-theme .separator:before, .dark-theme .separator:after {
  background-color: white;
}
.dark-theme .separator, .dark-theme .separator {
  color: white;
}

.texture {
  padding: 10px;
}

.texture3 {
  background-color: red;
  color: white;
}

.texture1 {
  //-webkit-box-sizing: content-box;
  //-moz-box-sizing: content-box;
  //box-sizing: content-box;
  //width: 320px;
  //height: 320px;
  //border: none;
  //font: normal 100%/normal Arial, Helvetica, sans-serif;
  //color: rgb(255, 255, 255);
  //-o-text-overflow: clip;
  //text-overflow: clip;
  background: -webkit-linear-gradient(63deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(-117deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(63deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(-117deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), -webkit-linear-gradient(0deg, rgb(27,27,27) 10px, rgba(0,0,0,0) 10px), -webkit-linear-gradient(-90deg, rgb(29,29,29) 25%, rgb(26,26,26) 25%, rgb(26,26,26) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgb(36,36,36) 75%, rgb(36,36,36) 100%), rgb(19, 19, 19);
  background: -moz-linear-gradient(27deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), -moz-linear-gradient(207deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), -moz-linear-gradient(27deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), -moz-linear-gradient(207deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), -moz-linear-gradient(90deg, rgb(27,27,27) 10px, rgba(0,0,0,0) 10px), -moz-linear-gradient(180deg, rgb(29,29,29) 25%, rgb(26,26,26) 25%, rgb(26,26,26) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgb(36,36,36) 75%, rgb(36,36,36) 100%), rgb(19, 19, 19);
  background: linear-gradient(27deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), linear-gradient(207deg, rgb(21,21,21) 5px, rgba(0,0,0,0) 5px), linear-gradient(27deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), linear-gradient(207deg, rgb(34,34,34) 5px, rgba(0,0,0,0) 5px), linear-gradient(90deg, rgb(27,27,27) 10px, rgba(0,0,0,0) 10px), linear-gradient(180deg, rgb(29,29,29) 25%, rgb(26,26,26) 25%, rgb(26,26,26) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgb(36,36,36) 75%, rgb(36,36,36) 100%), rgb(19, 19, 19);
  background-position: 0 5px, 10px 0, 0 10px, 10px 5px, 0 0, 0 0;
  -webkit-background-origin: padding-box;
  background-origin: padding-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-background-size: 20px 20px;
  background-size: 20px 20px;
}

.texture2 {
  //-webkit-box-sizing: content-box;
  //-moz-box-sizing: content-box;
  //box-sizing: content-box;
  //width: 320px;
  //height: 320px;
  //border: none;
  //font: normal 100%/normal Arial, Helvetica, sans-serif;
  //color: rgb(255, 255, 255);
  //-o-text-overflow: clip;
  //text-overflow: clip;
  background: -webkit-linear-gradient(0deg, rgba(255,255,255,0.0666667) 50%, rgba(0,0,0,0) 50%), -webkit-linear-gradient(0deg, rgba(255,255,255,0.129412) 50%, rgba(0,0,0,0) 50%), -webkit-linear-gradient(0deg, rgba(0,0,0,0) 50%, rgba(255,255,255,0.168627) 50%), -webkit-linear-gradient(0deg, rgba(0,0,0,0) 50%, rgba(255,255,255,0.188235) 50%), rgb(2, 104, 115);
  background: -moz-linear-gradient(90deg, rgba(255,255,255,0.0666667) 50%, rgba(0,0,0,0) 50%), -moz-linear-gradient(90deg, rgba(255,255,255,0.129412) 50%, rgba(0,0,0,0) 50%), -moz-linear-gradient(90deg, rgba(0,0,0,0) 50%, rgba(255,255,255,0.168627) 50%), -moz-linear-gradient(90deg, rgba(0,0,0,0) 50%, rgba(255,255,255,0.188235) 50%), rgb(2, 104, 115);
  background: linear-gradient(90deg, rgba(255,255,255,0.0666667) 50%, rgba(0,0,0,0) 50%), linear-gradient(90deg, rgba(255,255,255,0.129412) 50%, rgba(0,0,0,0) 50%), linear-gradient(90deg, rgba(0,0,0,0) 50%, rgba(255,255,255,0.168627) 50%), linear-gradient(90deg, rgba(0,0,0,0) 50%, rgba(255,255,255,0.188235) 50%), rgb(2, 104, 115);
  -webkit-background-origin: padding-box;
  background-origin: padding-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-background-size: 13px 13px, 29px 29px, 37px 37px, 53px 53px;
  background-size: 13px 13px, 29px 29px, 37px 37px, 53px 53px;
}

.texture4 {
  //-webkit-box-sizing: content-box;
  //-moz-box-sizing: content-box;
  //box-sizing: content-box;
  //width: 320px;
  //height: 320px;
  //border: none;
  //font: normal 100%/normal Arial, Helvetica, sans-serif;
  //color: rgba(255,255,255,1);
  //-o-text-overflow: clip;
  //text-overflow: clip;
  background: -webkit-linear-gradient(45deg, rgba(255,255,255,0.2) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 50%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%, rgba(0,0,0,0) 75%, rgba(0,0,0,0) 0), rgb(170, 204, 0);
  background: -moz-linear-gradient(45deg, rgba(255,255,255,0.2) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 50%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%, rgba(0,0,0,0) 75%, rgba(0,0,0,0) 0), rgb(170, 204, 0);
  background: linear-gradient(45deg, rgba(255,255,255,0.2) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 50%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%, rgba(0,0,0,0) 75%, rgba(0,0,0,0) 0), rgb(170, 204, 0);
  background-position: auto auto;
  -webkit-background-origin: padding-box;
  background-origin: padding-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-background-size: 50px 50px;
  background-size: 50px 50px;
}
</style>

PS：我使用的背景例子不是我的创作。我在enjoycss.com得到了它们。红色的背景，嗯，这也不是我的创作，也不是他们的……没有人的创作，也许吧。谁创造了red……我不知道。如果你这样做了，而我没有给予信任，请在评论中留言。

score 1 · Accepted Answer

很抱歉打扰您，但是如果不引入至少一个额外的标签，就无法在 HTML/CSS 中做到这一点。

唯一可以近似的方法是使用 :before 和 :after 伪类，但它无法插入 html 内容，更不用说根据内容具有可变宽度的内容了。

score 1 · Accepted Answer

你去：

<p class="separator"></p>

p.separator {
    line-height:1em;
    border-bottom:1px solid red;
}
p.separator:before {
    content:"TEXT";
    position:relative;
    left:50%;
    margin-left:-2.5em; /* half the number of chars */
    padding:0 0.3em;
    top:0.5em;
    background:white;
}

演示</p>

score 1 · Accepted Answer

您可以为线条使用背景图像，然后为文本提供一系列黑色文本阴影以模拟 2-3 像素的笔触，覆盖文本周围和文本之间的背景。

IE。CSS字体边框？

http://jsfiddle.net/4mPkU/ - 示例

向后兼容性将是基于文本阴影支持的问题。（有一个 IE 过滤器可能有助于兼容性）。

score 1 · Accepted Answer

.center-separator {
    display: flex;
  line-height: 1em;
  color: gray;
}

.center-separator::before, .center-separator::after {
    content: '';
    display: inline-block;
    flex-grow: 1;
    margin-top: 0.5em;
    background: gray;
    height: 1px;
    margin-right: 10px;
    margin-left: 10px;
  }

https://jsfiddle.net/0Lkj6wd3/

score 0 · Accepted Answer

要使某些东西动态化，您可以执行以下操作：

<ul>
    <li>
        <div class='lineLeft'></div>
        <div class='inlineText'></div>
        <div class=lineRight'></div>
    </li>
</ul>

基本上在这里你可以将'inlineText' div 设置为居中（不必是一个div，现在只是一个想法），然后'lineLeft' 和'lineRight' 都将被设置为相应的左/右浮动样式，高度设置为父列表项标签高度的一半。然后在 css 中给每个边 div 一个底部边框。

这是我能想到的最动态的解决方案。它有点更多的 HTML，但假设您可以正确调整所有内容的大小，它将正确地实现您的目标。

让我们知道。祝你好运。

html - CSS 挑战，我可以在不引入更多 HTML 的情况下做到这一点吗？

7 回答 7

Related

Reference