- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
如何在元素左侧使用自定义边框在列表项周围创建边框?
像这样:
我考虑过使用 css 3 angles....但我无法实现内圆或孔......有边框......而且它可能比以某种方式使用图像更乏味。
我现在正在考虑用背景图像来做这件事……并且已经关闭了左侧的边框,并试图让一个图形将自己定位在元素的左边缘,但没有成功。我的所有元素都有不同的长度,并且它们在水平 slider 中 float 在左边的元素上,使它变得更加复杂。
我还需要不同的悬停和事件样式,如图所示。
最后,我需要提供一个圆形样式的圆圈或椭圆形,它可以包含与类别中的元素数量关联的数字,并将其附加到样式列表项框的右上角。
这是我目前的进度:
HTML:
<div class="filters">
<div class="filters-inner">
<ul id="filters-slider" class="filters-list">
<li><a href="#">Darling</a></li>
<li><a href="#">Online Audience</a></li>
<li><a href="#">Digital Strategy</a></li>
<li><a href="#">Creative</a></li>
<li><a href="#">Mobile</a></li>
<li><a href="#">eCommerce</a></li>
<li><a href="#">Social Media</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Advertising</a></li>
<li><a href="#">Ramblings</a></li>
<li><a href="#">Ideas</a></li>
<li><a href="#">Newy New</a></li>
<li><a href="#">Freshy Fresh</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Advertising</a></li>
<li><a href="#">Ramblings</a></li>
<li><a href="#">Ideas</a></li>
<li><a href="#">Newy New</a></li>
<li><a href="#">Freshy Fresh</a></li>
</ul>
</div>
</div>
CSS:
.filters {
background-color: #fff;
padding-top: 3px;
padding-bottom: 5px;
width: 1145px;
height: 45px;
float: left;
-webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), 0 -1px 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), 0 -1px 10px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), 0 -1px 10px rgba(0, 0, 0, 0.1);
}
.filters-inner {
width: 1140px;
margin-right: auto;
margin-left: auto;
font-size: 11px;
overflow: hidden;
color: #999;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
ul.filters-list {
text-align: center;
white-space: nowrap;
display: inline-block;
padding-top: 10px;
}
ul.filters-list li {
float: left;
list-style-type: none;
padding-top: 2px;
padding-right: 20px;
padding-bottom: 2px;
padding-left:20px;
background-color: #fff;
margin-right: 10px;
margin-left: 10px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #CCC;
border-right-color: #CCC;
border-bottom-color: #CCC;
border-left-color: #CCC;
background-image: transparent url(http://www.dar-ling.com.php53-12.dfw1-1.websitetestlink.com/wp-content/themes/darling/img/leftside_tag_up.png);
background-repeat: no-repeat;
background-position: left center;
}
ul.filters-list li:hover {
background-color: #ECECEC;
background: transparent url(http://www.dar-ling.com.php53-12.dfw1-1.websitetestlink.com/wp-content/themes/darling/img/leftside_tag_hover.png) no-repeat left center;
}ul.filters-list li a {
color: #666666;
font-weight: bold;
}
ul.filters-list li a:hover {
text-decoration: none;
}
div.sample {
padding-top: 200px;
}
有谁知道如何正确地做到这一点?
最佳答案
这是一个适用于背景图像 Sprite 的解决方案。简而言之,我将标签用于整个“价格标签”形状(用户更容易点击),以及悬停/事件状态的背景冲刺。我还将“数量”数字包装在一个 span 标签中。
解决方案示例:http://jsfiddle.net/alexroper/zhrwA/34/
这是“价格标签”列表的 HTML:
<ul id="filters-slider" class="filters-list">
<li><a href="#">Darling</a> <span class="tag-qty">103</span></li>
<li class="active"><a href="#">Online Audience</a> <span class="tag-qty">9</span</li>
<li><a href="#">Digital Strategy</a> <span class="tag-qty">20</span></li>
</ul>
以下是构建“价格标签”的样式:
ul.filters-list {
text-align: center;
white-space: nowrap;
display: inline-block;
padding-top: 10px;
}
ul.filters-list > li {
color: #666666;
font-weight: bold;
float: left;
list-style-type: none;
line-height: 26px;
margin-right: 10px;
margin-left: 10px;
position: relative;
}
ul.filters-list > li > a {
color: #666666;
padding: 0 18px 0 24px;
background: url('https://www.dropbox.com/s/n8e74eikwf82vks/tag_sprite.png?raw=1') 0 0 no-repeat;
border-right: 1px solid #ccc;
display: block;
}
ul.filters-list > li > a:hover,
ul.filters-list > li.active > a {
text-decoration:none;
background-position: 0 -30px;
}
这些样式创建了“数量”数字:
.filters-list .tag-qty {
position: absolute;
top: -8px;
right: -9px;
border: 1px solid #bbb;
line-height: 16px;
display: inline-block;
padding: 0 5px;
background: #fff;
-webkit-border-radius: 9px;
border-radius: 9px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-box-shadow: 0px 0px 3px 0px #ccc;
box-shadow: 0px 0px 3px 0px #ccc;
}
.filters-list .active .tag-qty {
background:#ebebeb;
}
关于html - 如何在列表项周围创建类似边框的价格标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13003909/
学习SQL。有一个简单的带有字段标题的桌面游戏。我想根据标题进行搜索。如果我有一款名为 Age of Empires III: Dynasties 的游戏,并且我使用 LIKE 和参数 Age of
我正在尝试为以下数据结构创建镜头。我正在使用lens-family . data Tree = Tree { _text :: String, _subtrees ::
我发现很难理解这一点。比如说,在 Python 中,如果我想要一个根据用户输入在循环中修改的列表,我会有这样的内容: def do_something(): x = [] while(
我有一个像这样的 mysql 查询 SELECT group_name FROM t_groups WHERE group_name LIKE '%PCB%'; 结果是 group_name ----
我的数据库表中有超过一百万条记录。当我使用like时非常慢,当我使用match against时他们丢失了一些记录。 我创建帮助表: 标签列表 tag_id tag_name tag_rel_me
我在我的一个 Java 项目中使用 JXBrowser 来简单显示 googlemaps 网页,以便我可以在那里跟踪路线,但最近我想改进该项目,但我的问题是 JXBrowser 的许可证过期(只有一个
小问题:如何将 mysql_escape_string 变量包含在 like 子句中? "SELECT * FROM table WHERE name LIKE '%". %s . "%'" 或
我尝试使用几个jquery消息插件,例如alertify . 但我注意到的主要事情是系统消息框会停止后台功能,直到用户响应。其他插件没有此功能。 有没有办法将此功能添加到 jquery 插件中?可以扩
我是 Ruby 新手。我过去使用过 shell。我正在将 shell 程序转换为 ruby。我有以下命令 cmd="cat -n " + infile + " | grep '127.0.0.1
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的,
当我研究 Rust 时,我试图编写一个 Rust 函数来查看任何可迭代的字符串。 我最初的尝试是 fn example_1(iter: impl Iterator); fn example_2(ite
我必须在我的项目中使用代码拆分。但无论如何,第一次初始下载有一些代码。 现在我想向最终用户展示代码下载(.cache.html - 或其他代码拆分)的进度,例如 gmail 启动进度。 请你帮帮我。
我今天找到了一个错误,它最终是由我代码中的以下片段引起的(我试图在列表中仅过滤“PRIMARY KEY”约束): (filter #(= (% :constraint_type "PRIMARY KE
我正在尝试在关键字段上实现检查约束。关键字段由 3 个字符的前缀组成,然后附加数字字符(可以手动提供,但默认是从序列中获取整数值,然后将其转换为 nvarchar)。关键字段定义为 nvarhcar(
我正在尝试使用以下方式创建 List 实例: List listOne = new ArrayList(); List listTwo = new ArrayList(){}; List listTh
我过去曾为 iOS 开发过,最近转向了 mac 开发。我开始了一个“感受”事物的项目,但遇到了一个问题。我试图创建一个 NSTableView 来显示多个项目,包括一个标签、一个 2 UIImageV
我正在尝试编写一个查询,该查询将返回哪些主机缺少某个软件: Host Software A Title1 A
AFAIK,在三种情况下别名是可以的 仅限定符或符号不同的类型可以互为别名。 struct 或 union 类型可以为包含在其中的类型设置别名。 将 T* 转换为 char* 是可以的。 (不允许相反
\s 似乎不适用于 sed 's/[\s]\+//' tempfile 当它为工作时 sed 's/[ ]\+//' tempfile 我正在尝试删除由于命令而出现在每行开头的空格: nl -s ')
我正在使用 ocamlgraph 在 ocaml 中编写程序,并想知道是否要将其移植到 F# 我有哪些选择?谢谢。 最佳答案 QuickGraph .Net 最完整的图形库之一 关于F# 图形库(类似
我是一名优秀的程序员,十分优秀!