html – 在两个浮动元素之间放置一个流体宽度的伪元素

概述编辑：想出来 – 请参阅下面的答案解决方案. 背景：我有两个元素,一个是h1和一个跨度.我正在尝试将h1“Title”元素放在容器元素的左侧,并在容器右侧放置span“category”元素,我用float：left和：right完成. 问题：我想在h1和span元素之间出现一条虚线.如果可能的话,我想为此使用伪元素,因为它纯粹是审美的,所以我试图获得h1：在pseduo-element之后填充h 编辑：想出来 – 请参阅下面的答案解决方案.

背景：我有两个元素,一个是h1和一个跨度.我正在尝试将h1“Title”元素放在容器元素的左侧,并在容器右侧放置span“category”元素,我用float：left和：right完成.

问题：我想在h1和span元素之间出现一条虚线.如果可能的话,我想为此使用伪元素,因为它纯粹是审美的,所以我试图获得h1：在pseduo-element之后填充h1和span之间的容器元素的剩余宽度.

 

我试图让我的HTML尽可能接近以下内容：

<header>    <h1>Title</h1>    <span >category</span></header>

到目前为止我的CSS – 之后：伪元素当前位于h1元素下方,而不是h1和span之间：

header {  display: block;  background: cyan;  wIDth: 80%;  margin: 0 auto;}h1 {  display: block;  float: left; }h1:after {  display: block;  float: left;  wIDth: 100%;  border-bottom: 1px dotted black;  content: " ";}span {  display: block;  float: right;  background: green;}

解决方法 使用此代码：

jsFiddle

HTML

<div >    <span>Title</span>    <span >category</span></div>

CSS

div{    wIDth:100%;    position:relative;    height:50px;    border:1px solID;}span{    line-height:50px;    background:#fff;    padding:0 10px;    float:left;    position:relative;    z-index:1;}span.category{    float:right;}.container:after{    content:"";    position:absolute;    wIDth:100%;        height:0;    border-bottom:1px dotted #4c5660;    top:50%;    left:0;}

总结

以上是内存溢出为你收集整理的html – 在两个浮动元素之间放置一个流体宽度的伪元素全部内容，希望文章能够帮你解决html – 在两个浮动元素之间放置一个流体宽度的伪元素所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。