需求：下面的文字内容分别都写在一个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解决一个让人头疼的问题的更多相关文章

  1. 用CSS画小猪佩奇，你就是下一个社会人！ js将“I am a coder”反转成 “coder a am I”，不许用split，join，subString，reverse；求解方法三

    用CSS画小猪佩奇,你就是下一个社会人!   欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:江志耿 | 腾讯TEG网络工程师 我是佩奇,哼,这是我的弟弟乔治,呱呱,这是我的妈妈,嚯 ...

  2. Effective前端1：能使用html/css解决的问题就不要使用JS

    div{display:table-cell;vertical-align:middle}#crayon-theme-info .content *{float:left}#crayon-theme- ...

  3. DIV+CSS解决IE6，IE7，IE8，FF兼容问题

    1.IE8下兼容问题,这个最好处理,转化成IE7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了:1. <metahttp-equivmetahttp-equiv ...

  4. 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 ...

  5. Eruda 一个被人遗忘的调试神器

    Eruda 一个被人遗忘的调试神器 引言   日常工作中再牛逼的大佬都不敢说自己的代码是完全没有问题的,既然有问题,那就也就有调试,说到调试工具,大家可能对于 fiddler.Charles.chro ...

  6. [转]能用HTML/CSS解决的问题就不要使用JS

    原文链接:http://www.codeceo.com/article/html-css-not-js.html 为什么说能使用html/css解决的问题就不要使用JS呢?两个字,因为简单.简单就意味 ...

  7. 能使用html/css解决的问题就不要使用JS

    为什么说能使用html/css解决的问题就不要使用JS呢?两个字,因为简单.简单就意味着更快的开发速度,更小的维护成本,同时往往具有更好的体验,下面介绍几个实例. 1. 导航高亮 导航高亮是一种很常见 ...

  8. mouseleave mouseout时候悬浮框不应该消失的时候消失了 css 解决办法

    要实现的效果和代码思路 简单来说就是 用一个div包着喇叭和悬浮框 悬浮事件写在这个div上 鼠标悬浮到div上的时候 悬浮框出现 最终要做成鼠标从小喇叭移动到下面的框上的时候 下面框是不会消失的. ...

  9. 优化 html 标签 为何能用HTML/CSS解决的问题就不要使用JS？

    优化 html 标签 2018年05月11日 08:56:24 阅读数:19 有些人写页面会走向一个极端,几乎页面所有的标签都用div,究其原因,用div有很多好处,一个是div没有默认样式,不会有m ...

随机推荐

  1. Gitlab的安装

    # GitLab Server 的搭建 参考 https://about.gitlab.com/installation ## 1. 准备工作 以Centos7为例,准备一台至少内存为4G的机器. # ...

  2. web自动化上传附件 2

    当我们进行某一项web自动化脚本编写时,有上传附件操作,点击附件直接打开了windows窗口,而有的点击添加附件打开一个小窗体,再点击‘浏览’才打开windows窗口, 中间多了这么一个小窗体的操作, ...

  3. 使用Typescript实现依赖注入（DI）

    前言DI总是和ico相辅相成的,如果想对DI有更多的了解,可以移步我的另一篇文章 依赖注入(DI)和控制反转(IOC),再次我就不多做赘述了. 前几天看见一道面试题,今天借这个话题想跟大家分享一下: ...

  4. 201621123002《Java程序设计》第十周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 1. 常用异常 结合题集题目7-1回答 1.1 自己以前编写的代码中经常出现 ...

  5. web安全之机器学习入门——3.2 决策树与随机森林

    目录 简介 决策树简单用法 决策树检测P0P3爆破 决策树检测FTP爆破 随机森林检测FTP爆破 简介 决策树和随机森林算法是最常见的分类算法: 决策树,判断的逻辑很多时候和人的思维非常接近. 随机森 ...

  6. -bash: /etc/profile: line 11: syntax error near unexpected token `$'{\r''报错问题解决

    在Linux系统配置Java环境变量之后执行 source /etc/profile指令报:-bash: /etc/profile: line 11: syntax error near unexpe ...

  7. cookie存储

    cookie就是用来存储数据的 cookie先分装函数 这是用来存数据的函数 function setCookie(name,value,iDay){ if(iDay){ var oDate = ne ...

  8. springboot pom.xml记

    本文包括: springboot 基本pom.xml配置 热部署 配置打包插件 maven pom.xml配置详解 1. springboot 基本pom.xml配置 <project xmln ...

  9. Swagger2基本注解使用

    @Api:用在请求的类上,表示对类的说明 tags="说明该类的作用,可以在UI界面上看到的注解" value="该参数没什么意义,在UI界面上也看到,所以不需要配置&q ...

  10. C/C++字符串相关知识使用整理

    C++字符串处理有最原始的char以及string两种方式,这里对其常用的功能进行总结. #include <string>using namespace std; ]; string s ...