- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
这是 js fiddle :http://jsfiddle.net/7dbemt0k/我使用下面的代码制作分隔线。
box-shadow: 1px 0 #111111,
2px 0 #777777;
但我希望它更长,从最顶部到最底部越过 border-bottom。我该如何增加长度,或者我应该使用类似垂直
HTML
<ul class="sf-menu">
<li>
<a href="<?php echo $data['config']['SITE_DIR']; ?>/">
<img src='<?php echo $data['config']['THEME_DIR']."/img/home_1.png"; ?>'></a>
</li>
<li>
<a href="<?php echo $data['config']['SITE_DIR']; ?>/main/page/about-us">About Us</a>
<ul>
<li>
<a href="<?php echo $data['config']['SITE_DIR']; ?>/main/page/the-centre-point-of-any-web-projects">Centre-Point of Web Projects</a>
</li>
</ul>
</li>
<li>
<a href="<?php echo $data['config']['SITE_DIR']; ?>/member/branch/index">Branches</a>
<?php Core::getHook('block-branches'); ?>
</li>
<li>
<a href="<?php echo $data['config']['SITE_DIR']; ?>/main/news">News</a>
</li>
<li>
<a href="<?php echo $data['config']['SITE_DIR']; ?>/main/event">Events</a>
</li>
<li>
<a href="<?php echo $data['config']['SITE_DIR']; ?>/contact">Contact Us</a>
</li>
</ul>
<div class="clear"></div>
CSS
/* Main */
.sf-menu {
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background-color: #2D2D2D;
/*background-image: linear-gradient(#444, #111);*/
border-bottom:6px solid #072438;
/*border-radius: 50px;*/
/* box-shadow: 0 2px 1px #9c9c9c;*/
box-shadow: 2px 1px #393939;
}
.sf-menu li {
float: left;
padding: 0 0 10px 0;
position: relative;
box-shadow: 1px 0 #111111,
2px 0 #777777;
border-bottom:6px solid #393939;
}
.sf-menu a {
float: left;
height: 20px;
padding: 0 25px;
color: #999;
/* text-transform: uppercase;*/
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
.sf-menu li:hover > a {
color: #fafafa;
}
*html .sf-menu li a:hover { /* IE6 */
color: #fafafa;
}
.sf-menu li:hover > ul {
display: block;
}
/* Sub-menu */
.sf-menu ul {
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background-color: #2D2D2D;
border-bottom:none;
/* background-image: linear-gradient(#444, #111); */
/*-moz-border-radius: 5px;*/
/*border-radius: 5px;*/
}
.sf-menu ul li {
float: none;
margin: 0;
padding: 0;
display: block;
box-shadow: 0 1px 0 #111111,
0 2px 0 #777777;
border-bottom:none;
}
.sf-menu ul li:last-child {
box-shadow: none;
}
.sf-menu ul a {
padding: 10px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
.sf-menu ul a:hover{
margin-left:10px;
}
*html .sf-menu ul a { /* IE6 */
height: 10px;
width: 150px;
}
*:first-child+html .sf-menu ul a { /* IE7 */
height: 10px;
width: 150px;
}
/* active menu*/
/*end */
.sf-menu ul a:hover {
/*background-color: #0186ba;
background-image: linear-gradient(#04acec, #0186ba);*/
}
.sf-menu ul li:first-child a {
/*border-radius: 5px 5px 0 0;*/
}
.sf-menu ul li:first-child a:after {
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #072438;
}
.sf-menu ul li:first-child a:hover:after {
border-bottom-color: #072438;
}
.sf-menu ul li:last-child a {
/*border-radius: 0 0 5px 5px;*/
}
/* Clear floated elements */
.sf-menu:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.sf-menu ul li a:last-child{
box-shadow: 0 0 #111111,
0 0 #777777;
}
* html .sf-menu { zoom: 1; } /* IE6 */
*:first-child+html .sf-menu { zoom: 1; } /* IE7 */
最佳答案
从 .sf-menu
中删除 padding: 10px 0 0 0;
并更改 .sf-menu li 上的
到 padding
padding: 10px 0;
更新
因为 box-shadow
超出了元素的自然宽度,您只需使用 margin
向 li
添加一些间距
.sf-menu li {
float: left;
padding: 10px 0;
margin: 0 0 0 2px; <---- //add margin
position: relative;
box-shadow: 1px 0 #111111,
2px 0 #777777;
border-bottom:6px solid #393939;
}
关于html - 如何使 border-right 更长作为菜单的 <li> 分隔符?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27632690/
有没有办法像 super 速记样式一样在 CSS 中组合 border-top,border-right,border-left,border-bottom。 例如: border: (1px sol
这个问题在这里已经有了答案: Combining border-top,border-right,border-left,border-bottom in CSS (4 个答案) 关闭 3 年前。
所以,我是那些以始终使用最新版本的浏览器而自豪的人之一(当然 Internet Explorer 除外 - 我说的不是那个浏览器)。 我遇到了 this awesome CSS3 website详细介
border-top-color 是 #9b9c9d 而 border-bottom-color 是 #f6f9fc .渐变旨在在border-left 和border-right 上将顶部颜色过渡到
我将开始开发一个新网站,并准备处理浏览器用于计算元素宽度和高度的不同方法 (box model stuff)。不知何故,我想到了:如果我只是将 box-sizing 应用于网站中的所有元素会怎么样?
这是 fiddle :http://jsfiddle.net/3Ys2d/ CSS div{ border: solid 3px blue; border-left-color: re
这个接缝很容易,但我还没有找到任何方法来做到这一点。我有 3 个 div(但解决方案必须适用于 n 个 div),如下图所示: |分区 1 ||分区 2 ||第 3 部分 | 例如: 我想要这样的普通
由于视网膜显示器具有如此高的像素密度,因此在这些显示器上 1 像素的边框看起来非常大。正如 Brad Birdsall 所建议的,CSS box-shadow属性可用于创建“0,5 px”边框,在
我可以这样写边框的样式: border: 2px solid #DDDDDD; 或者像这样: -moz-border-bottom-colors: none; -moz-border-left-col
当在已经有 1px 边框的 div 中覆盖 border-bottom 的大小时,Firefox 和 Chrome 呈现 border-left 和 border-right 不正确: HTML C
我是CSS3新手,最近在学习border-image属性,在看W3C文档的时候: http://dev.w3.org/csswg/css-backgrounds/#border-image-width
我正在尝试在使用 border-radius 属性的 div 上使用 border 属性。 这是我的 CSS: #page { border: 1px solid #beb2b2; w
我只想在已经具有顶部和底部边框(1px 纯灰色)的 div 上添加一个左边框(5px 纯蓝色)。我希望 border-left 位于 border-top 和 border-bottom 之上,但浏览
我有一个使用 border-radius 的带有圆 Angular 的流体宽度 div,以及 div 一侧的大边框,颜色不同。 当浏览器窗口足够小时,所有边框都会正常运行。但是,当我放大窗口大小时,我
导致“错误”的 Css: div { width: 100px; height: 100px; background-color: transparent; box-s
Border-bottom长度小于border-right怎么办? img { border-bottom: 5px solid #02a8d8; border-right:1px s
我是一名优秀的程序员,十分优秀!