用CSS解决一个让人头疼的问题
需求:下面的文字内容分别都写在一个a标签里,现在需要获取到每一行最后一个a标签的竖线,并删除
我首先想到的是用CSS3新增选择器—— :nth-child()来解决,比如 :nth-child(3n) 这里的3n表示获取到所有3的倍数的元素
更多用法参见:https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child
但这里又有一个问题,因为上面的文字内容都不是固定不变的,比如上面截图里的自考,现在是在第一排第3个,
但如果专升本文字变多,自考就会被挤下去,变成第二排的第一个
真是想冥思苦想也没想出个好的解决办法,心里也一直在想,不可能还用js去实现吧,难免有点小题大做
后经大神赐教,巧妙的用纯css解决了这个疑难杂症,再一次感受到CSS的深奥和自己技术的不足,下面附上解决代码
关键css代码有2个,一个是给a标签加上 margin-left: -1px; 另一个是给a标签外层div加上overflow: hidden;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style>
.main {
/* 必须加这个 */
overflow: hidden;
}
.test {
display: inline-block;
margin: 10px 5px 0;
/* 必须加这个 */
margin-left: -1px;
padding: 0 5px;
color: #ccc;
font-size: 18px;
border-left: 1px solid #666;
}
</style>
</head>
<body>
<div class="main">
<a href="javascript:;" class="test">test11111111</a>
<a href="javascript:;" class="test">test2222222</a>
<a href="javascript:;" class="test">test</a>
<a href="javascript:;" class="test">test</a>
<a href="javascript:;" class="test">test</a>
<a href="javascript:;" class="test">test</a>
<a href="javascript:;" class="test">test</a>
<a href="javascript:;" class="test">test</a>
<a href="javascript:;" class="test">test</a>
</div>
</body>
</html>
用CSS解决一个让人头疼的问题的更多相关文章
- 用CSS画小猪佩奇,你就是下一个社会人! js将“I am a coder”反转成 “coder a am I”,不许用split,join,subString,reverse;求解方法三
用CSS画小猪佩奇,你就是下一个社会人! 欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:江志耿 | 腾讯TEG网络工程师 我是佩奇,哼,这是我的弟弟乔治,呱呱,这是我的妈妈,嚯 ...
- Effective前端1:能使用html/css解决的问题就不要使用JS
div{display:table-cell;vertical-align:middle}#crayon-theme-info .content *{float:left}#crayon-theme- ...
- DIV+CSS解决IE6,IE7,IE8,FF兼容问题
1.IE8下兼容问题,这个最好处理,转化成IE7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了:1. <metahttp-equivmetahttp-equiv ...
- DIV+CSS解决IE6,IE7,IE8,FF兼容问题(转至http://www.douban.com/note/163291324/)
2011-07-25 21:11:47 DIV+CSS解决IE6,IE7,IE8,FF兼容问题 1.IE8下兼容问题,这个最好处理,转化成IE7兼容就可以.在头部加如下一段代码,然后只要在IE ...
- Eruda 一个被人遗忘的调试神器
Eruda 一个被人遗忘的调试神器 引言 日常工作中再牛逼的大佬都不敢说自己的代码是完全没有问题的,既然有问题,那就也就有调试,说到调试工具,大家可能对于 fiddler.Charles.chro ...
- [转]能用HTML/CSS解决的问题就不要使用JS
原文链接:http://www.codeceo.com/article/html-css-not-js.html 为什么说能使用html/css解决的问题就不要使用JS呢?两个字,因为简单.简单就意味 ...
- 能使用html/css解决的问题就不要使用JS
为什么说能使用html/css解决的问题就不要使用JS呢?两个字,因为简单.简单就意味着更快的开发速度,更小的维护成本,同时往往具有更好的体验,下面介绍几个实例. 1. 导航高亮 导航高亮是一种很常见 ...
- mouseleave mouseout时候悬浮框不应该消失的时候消失了 css 解决办法
要实现的效果和代码思路 简单来说就是 用一个div包着喇叭和悬浮框 悬浮事件写在这个div上 鼠标悬浮到div上的时候 悬浮框出现 最终要做成鼠标从小喇叭移动到下面的框上的时候 下面框是不会消失的. ...
- 优化 html 标签 为何能用HTML/CSS解决的问题就不要使用JS?
优化 html 标签 2018年05月11日 08:56:24 阅读数:19 有些人写页面会走向一个极端,几乎页面所有的标签都用div,究其原因,用div有很多好处,一个是div没有默认样式,不会有m ...
随机推荐
- 聚簇索引(Clustered Index)和非聚簇索引 (Non- Clustered Index)
本文转自https://my.oschina.net/u/1866821/blog/297673 索引的重要性数据库性能优化中索引绝对是一个重量级的因素,可以说,索引使用不当,其它优化措施将毫无意义. ...
- How to change system keyboard keymap layout on CentOS 7 Linux
The easiest way to swap between keymaps and thus temporarily set keys to different language by use o ...
- 《探索未知种族之osg类生物》目录
精力有限,博客园不在更新<探索未知种族之osg类生物>.在这里列出所有文章目录(持续更新)有兴趣的同学可以看看. 探索未知种族之osg类生物[目录] 前序 探索未知种族之osg类生物--- ...
- java maven compiler设置默认1.8
方法一: <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupI ...
- docker--在centos镜像安装mysql
一.安装centos镜像 1.拉取最新版本centos镜像(拉取centos7 则使用centos:7即可) docker pull centos:lasted 2.查看已有镜像 docker ima ...
- 杨其菊201771010134《面向对象程序设计(java)》第十四周学习总结
第十四周学习总结 第一部分:理论知识 理论知识:本周学习Swing用户界面 内容:Swing与模型-视图-控制器设计模式:布局管理概述:文本输入 :选择组件:菜单:复杂的布局管理:对话框: 第二部分: ...
- Ubuntu 下的QQ WECHAT FOXMAIL解决方案
原文链接: https://www.lulinux.com/archives/1319 真心很强大. Ubuntu系发行版*安装deepin wine QQ的步骤 1,安装deepin-wine环境: ...
- wzyxidian Scanner 与 Readable 的read()方法
Readable接口中的read()方法实现了将字符串读入charBuffer中,但是只有在需要输出的时候才会调用. Scanner是文本扫描器类,利用Scanner扫描并输出charBuffer中的 ...
- PHP获取时间戳和微秒数以及生成唯一ID
microtime函数 描述:返回当前Unix时间戳和微秒数 语法:mixed microtime( [ bool $get_as_float ] ) //直接输出 echo microtime(); ...
- 区域检测算法-MSERs
区域检测算法-MSERs:最大稳定极值区域 参考书籍——<图像局部不变性特征与描述>王永明.王贵锦著 MSER最大极值稳定区域的提取步骤:1.像素点排序 2.极值区域生成 3.稳定 ...