相关疑难解决方法(0)

我正在尝试制作一个水平规则,中间有一些文字.例如:

-----------------------------------我的头衔------------ -----------------

有没有办法在CSS中做到这一点？没有所有" - "破灭显然.

我可以在HTML中这样做:

我想在我的上添加边框标题(此图中的"常规信息")div.可能吗？怎么做？

注意:
图像不是HTML页面的图像,而是Java应用程序的图像.

我正在研究一些CSS,其中设计要求页面标题(标题)以水平线为中心,水平线在两侧垂直居中.此外,页面上有背景图像,因此标题的背景需要是透明的.

我已经集中了标题,我可以使用伪类来创建该行.但是当我越过标题的文本时,我需要该行消失.

我考虑过使用一个透明的背景渐变,但由于每个标题的长度不同,我不知道在哪里放置停止.

这是迄今为止的CSS:

h1 {  
    text-align: center;  
    position: relative;  
    font-size: 30px;  
    z-index: 1;  
}  

h1:after {  
    content: '';  
    background-color: red;  
    height: 1px;  
    display: block;  
    position: absolute;  
    top: 18px;  
    left: 0;  
    width: 100%;  
}  

这是我所在的地方:http: //jsfiddle.net/XWVxk/1/

这可以用CSS完成而不添加任何额外的HTML吗？

我想显示一些文本,然后是虚线,然后在HTML页面的同一行显示更多文本,例如

Name: .......................................................... (Engineer)

我希望"Name"在左边框左对齐,而"Engineer"在右边框右对齐,然后浏览器能够用重复点填充两者之间的间隙.

我已经尝试了几种不同的方法来使用CSS和HTML来实现这一点,但不能完全正确.我不想指定每个组件的宽度(实际或百分比),以便解决方案可以重复使用不同长度的单词,例如,相同的解决方案可以使用:

Factory Location: .................................... (Not invoice address)

希望这个问题有道理,任何建议表示赞赏,谢谢.

我被要求创建这个标题,纯粹用css,它甚至可能吗？

文本的背景需要保持透明,h2需要跨越任何容器的宽度,并且左右边框自动填充剩余空间.

h2 {
    font-size:42px;
    line-height:48px;
    width:100%;
    overflow: hidden;
    &:before {
        content:'';
        position:relative;
        padding-left:50px;
        padding-right:10px;
        margin-right:10px;
        margin-bottom:10px;
        background:red;
        height:3px;
        display:inline-block;
    }
    &:after {
        content:'';
        margin-left:10px;
        width:100%;
        background:red;
        height:3px;
        display:inline-block;
    }
}

左侧很容易,但是我被困在右侧.

https://jsfiddle.net/kab5qtbb/

我似乎无法弄清楚如何只使正确的线填充容器右侧的剩余空间.

使用Angular Material,我正在尝试创建一个水平线,中间有一个单词.与此处显示的非常相似的东西.

我试过这个并且它很接近,但我希望这些线垂直对齐到单词的中间或.

<div layout="row" layout-align="center start">
  <md-divider flex></md-divider>
  <div style="flex: 0 1 auto;">or</div>
  <md-divider flex></md-divider>
</div>

http://jsfiddle.net/devotis/a7m6xrwy/

我猜,我需要左右风格<hr>.如何改进此代码并保持Angular Material的方式？

在CSS3中使用最少的容器创建以下内容的最佳方法是什么？

目前我正在使用2个嵌套的div,hr这看起来过分了.

<div class="search">
  <p>SEARCH</p>
</div>

我试图在图像中添加虚线横向填充.只在文本的两侧.有什么方法可以做到吗？

我正在尝试在模板顶部实现标题(h1),如下所示(点表示垂直居中的点图像线):

标题示例http://www.pixelplus.nl/klanten/klijsen/example.jpg

通常我会这样做:

<h1><span>This is a title</span></h1>

将文本居中h1并添加背景颜色span以及一点填充.

在目前的项目中,我正处理一个透明的背景background-image.所以......背景色span不会飞.

在尝试了一些事情后,这是最接近的:

<header class="headerPage">
    <div class="row">
        <div class="dotted">&nbsp;</div>
        <div class="title"><h1>This is a title</h1></div>
        <div class="dotted">&nbsp;</div>
    </div>
</header>

这个CSS:

header.headerPage {
    display: table;
    margin: 0 0 35px;
    width: 100%;
}
header.headerPage .row {display: table-row;}
header.headerPage .row div {display: table-cell;}
header.headerPage .row div.dotted {
    width: 10%;
    background: url('../img/line-dotted.svg') left center repeat-x transparent;
}
header.headerPage .row div.title {
    padding: 0 15px;
    text-align: center;
}
header.headerPage .row div.title …

我有一个像这样的图像：

<a href="#landing">
  <img src="button.png" style="display:block; margin-top:10px; margin:0 auto;" />
</a>

我想要做的是在图像前后添加一条线，图像居中。

像这样：

- - - - - - - - - - 图片 - - - - - - - - - - -

我无法理解整体:before和:after事情。我的问题是如何在图像前后添加一行。

概括

我想创建一个以日期为中心的元素，并且在左侧和右侧，应该有一条线（如<hr>）填充空白区域。

示例（我想创建的）

我的尝试（代码片段）

我尝试了几种不同的方法来实现这一目标，但我的知识仍然有限。您能解释一下我如何实现我的目标吗？

.post-container .blog-post .post-date hr {
  color: #212931;
  width: 30%;
  vertical-align: middle;
}

.post-date .right {
  position: absolute;
  right: 0;
  top: 0;
  margin-right: 5%;
}

.post-date p {
  font-size: 20px;
  display: inline-block;
  position: absolute;
  transform: translateY(-15px);
  color: #212931;
  margin: 0 auto;
}

<div class="post-date">
  <hr class="left" />
  <p>2023/06/25</p>
  <hr class="right" />
</div>

我正在尝试创建一个效果,该效果基本上构成一个标题标记,其中两行填充容器的剩余宽度.我正在尝试创建它,以便无论标题文本的长度如何,您仍然可以获得相同的效果+间距量.这个图像更好地显示了我想要解释的内容:

我最接近的是使用百分比宽度,但如果只使用一个小标题,则剩余空间很多.通常我会在我的标题标签中为span对象添加背景颜色,但我也试图使其成为可以在各种背景颜色上起作用的效果.

这是一个jsfiddle:https://jsfiddle.net/wv9zcuvm/ 和一些代码:

HTML:

<h2><span>Small title</span></h2>

CSS:

h2{
    width:100%;
    position:relative;
    top:0; left: 0;
}

h2:before,
h2:after{
    content:"";
    display:inline-block;
    width:30%;
    height:1px;
    background-color:red;
    position:relative;
    top: -10px;
}

h2:before{
    left:0;
}

h2:after{
    right:0;
}

h2 span{
    width:40%;
    display:inline-block;
    text-align:center;
}

任何人都可以建议我如何实现我想要创造的东西？

如何像标题文字之后那样画一条线:

"TITLE ________"

在CSS？
"_"应该完成div的其余部分并填充剩余空间.