最后一个border-left无法正确显示

时间：2015-07-27 20:09:01

标签： html css

我的问题是，nav border-left的{​​{1}} li无法正确显示，我不知道原因。 有人可以帮我解决这个问题吗

我的问题的截图（最后左边的边框丢失）：

Border missing

这是我的代码：

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
	blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,
	em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
	b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas,
	details, embed, figure, figcaption, footer, header, hgroup, menu, nav,
	output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup,
	menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* END RESET */
/*  *{
 margin: 0; padding: 0; border: none;
 } */

nav{
	clear: both; /* faire un clear pour revenir a la ligne  */
	width: 960px;
	height: 50px;
	
/* 	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	background-color: #3b7c33; */
	
	 /* Fallback */
 	
     border-radius: 30px;  /* dora 3la kolchi   /*
	/* couleur degradé   /*
	/* Safari 4+, Chrome 1-9 */
 	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5fae53), to(#3b7c33)); 
	/* Safari 5.1+, Mobile Safari, Chrome 10+ */
	background-image: -webkit-linear-gradient(top, #5fae53, #3b7c33); 
	/* Firefox 3.6+ */
	background-image: -moz-linear-gradient(top, #5fae53, #3b7c33);
	/* IE 10+ */
	background-image: -ms-linear-gradient(top, #5fae53, #3b7c33);
	/* Opera 11.10+ */
	background-image: -o-linear-gradient(top, #5fae53, #3b7c33);
	
	border: 1px solid #336c2b;
	

}
nav ul li 
{
	float:left;
	border-right:1px solid #539948;
	border-left: 1px solid #336c2b;
}

nav ul li a{
	display: block; 
	padding: 0 30px;
	height: 50px;  
	line-height: 50px; 
	font-size: 15px;
	color: #fff;
	text-decoration: none;
    text-shadow: 0 1px 0 #387031;
	}
nav ul li a:hover{
	
	background: #5fae53;
	}
nav ul li.home{
	background: url(images/home.png) no-repeat 50% 50%; 
	text-indent: -9999px;
	border-left: none;

	}

nav ul li.home a:hover{
	/* -webkit-border-top-left-radius: 30px;
	-webkit-border-bottom-left-radius: 30px;
	*/
	
	border-top-left-radius: 30px;
	border-bottom-left-radius: 30px; 
    background: #5fae53 url(images/home.png) no-repeat 50% 50%;
}

nav ul li.last{
	
	border-left: none;
	border-right: none;
	float: right;
	margin-right: 20px; 
}
<div id='header-wrap'>
        <header>


            <nav>
                <ul>
                    <li class="home"><a href="#" title="">Home</a></li>
                    <li><a href="#" title="">Services</a></li>
                    <li><a href="#" title="">About Us</a></li>
                    <li><a href="#" title="">Testimonials</a></li>


                </ul>
            </nav>
        </header>
</div>

jsfiddle

中的代码

先谢谢

4 个答案:

答案 0 :(得分：1)

从nav ul li.home

中删除此行 
text-indent: -9999px;

请参阅此fiddle

答案 1 :(得分：1)

事情是你li之间的边界是由你的第一个li的右边界和休闲的左边界组成的，所以最后的li只有右边界，所以你必须添加一个左边框的元素。像其他人一样只添加右边框border-right: 1px solid #539948;或左边框border-left: 1px solid #336c2b;，您将不会拥有与其他边框完全相同的分隔符。

enter image description here

要实现完全分隔符，请尝试以下方法之一：

1 - 使用伪元素：

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content:'';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* END RESET */

/*  *{
 margin: 0; padding: 0; border: none;
 } */
 nav {
    clear: both;
    /* faire un clear pour revenir a la ligne  */
    width: 960px;
    height: 50px;
    /* 	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	background-color: #3b7c33; */
    /* Fallback */
    border-radius: 30px;
    /* dora 3la kolchi   /*
	/* couleur degradé   /*
	/* Safari 4+, Chrome 1-9 */
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5fae53), to(#3b7c33));
    /* Safari 5.1+, Mobile Safari, Chrome 10+ */
    background-image: -webkit-linear-gradient(top, #5fae53, #3b7c33);
    /* Firefox 3.6+ */
    background-image: -moz-linear-gradient(top, #5fae53, #3b7c33);
    /* IE 10+ */
    background-image: -ms-linear-gradient(top, #5fae53, #3b7c33);
    /* Opera 11.10+ */
    background-image: -o-linear-gradient(top, #5fae53, #3b7c33);
    border: 1px solid #336c2b;
}
nav ul li {
    float:left;
    border-right:1px solid #539948;
    border-left: 1px solid #336c2b;
}

nav ul:after {
     content: '';
     display: inline-block;
     border-right: 0;
     height: 50px;
     border-left: 1px solid #336c2b;
}
nav ul li a {
    display: block;
    padding: 0 30px;
    height: 50px;
    line-height: 50px;
    font-size: 15px;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 1px 0 #387031;
}
nav ul li a:hover {
    background: #5fae53;
}
nav ul li.home {
    background: url(images/home.png) no-repeat 50% 50%;
    text-indent: -9999px;
    border-left: none;
}
nav ul li.home a:hover {
    /* -webkit-border-top-left-radius: 30px;
	-webkit-border-bottom-left-radius: 30px;
	*/
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    background: #5fae53 url(images/home.png) no-repeat 50% 50%;
}
nav ul li.last {
    border-left: none;
    border-right: none;
    float: right;
    margin-right: 20px;
}
<div id='header-wrap'>
    <header>
        <nav>
            <ul>
                <li class="home"><a href="#" title="">Home</a>

                </li>
                <li><a href="#" title="">Services</a>

                </li>
                <li><a href="#" title="">About Us</a>

                </li>
                <li><a href="#" title="">Testimonials</a>

                </li>
            </ul>
        </nav>
    </header>
</div>

2 - 最后添加虚拟礼物

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content:'';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* END RESET */

/*  *{
 margin: 0; padding: 0; border: none;
 } */
 nav {
    clear: both;
    /* faire un clear pour revenir a la ligne  */
    width: 960px;
    height: 50px;
    /* 	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	background-color: #3b7c33; */
    /* Fallback */
    border-radius: 30px;
    /* dora 3la kolchi   /*
	/* couleur degradé   /*
	/* Safari 4+, Chrome 1-9 */
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5fae53), to(#3b7c33));
    /* Safari 5.1+, Mobile Safari, Chrome 10+ */
    background-image: -webkit-linear-gradient(top, #5fae53, #3b7c33);
    /* Firefox 3.6+ */
    background-image: -moz-linear-gradient(top, #5fae53, #3b7c33);
    /* IE 10+ */
    background-image: -ms-linear-gradient(top, #5fae53, #3b7c33);
    /* Opera 11.10+ */
    background-image: -o-linear-gradient(top, #5fae53, #3b7c33);
    border: 1px solid #336c2b;
}
nav ul li {
    float:left;
    border-right:1px solid #539948;
    border-left: 1px solid #336c2b;
}

nav ul li:last-of-type {
     border-right: 0;
     height: 50px;
}
nav ul li a {
    display: block;
    padding: 0 30px;
    height: 50px;
    line-height: 50px;
    font-size: 15px;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 1px 0 #387031;
}
nav ul li a:hover {
    background: #5fae53;
}
nav ul li.home {
    background: url(images/home.png) no-repeat 50% 50%;
    text-indent: -9999px;
    border-left: none;
}
nav ul li.home a:hover {
    /* -webkit-border-top-left-radius: 30px;
	-webkit-border-bottom-left-radius: 30px;
	*/
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    background: #5fae53 url(images/home.png) no-repeat 50% 50%;
}
nav ul li.last {
    border-left: none;
    border-right: none;
    float: right;
    margin-right: 20px;
}
<div id='header-wrap'>
    <header>
        <nav>
            <ul>
                <li class="home"><a href="#" title="">Home</a>

                </li>
                <li><a href="#" title="">Services</a>

                </li>
                <li><a href="#" title="">About Us</a>

                </li>
                <li><a href="#" title="">Testimonials</a>

                </li>
                <li></li>
            </ul>
        </nav>
    </header>
</div>

我真的建议你“ 1 - 使用伪元素：”以避免html中不必要的li。

答案 2 :(得分：0)

尝试将以下内容添加到您的cssc

＆＃13;
＆＃13; 
li:nth-last-child(1) {
  border-right: 1px solid #336c2b;
}
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

您可以简化并添加$(document).ready(function () { //this function executes on page load if (!localStorage.getItem('color')) { //if our value does not already exist, we'll default it to green localStorage.setItem('color', 'green'); $('#div').addClass('green'); } else { //our value exists already if (localStorage.getItem('color') == 'green') { $('#div').addClass('green'); } else { $('#div').addClass('red'); } } }); $('button').click(function () { var color = localStorage.getItem('color'); if (color == 'green') { $('#div').removeClass().addClass('red'); color = 'red'; } else { $('#div').removeClass().addClass('green'); color = 'green'; } localStorage.setItem('color', color); }); 。它将在最后显示或将与下一个左边界混合。

如果导航栏突破了线条，你不必担心右边界可能会在视觉上丢失：）

box-shadow

https://jsfiddle.net/esmnf7um/1/

＆＃13;
＆＃13; 
nav ul li 
{
    float:left;
    border-right:1px solid #539948;
    border-left: 1px solid #336c2b;
    box-shadow: 1px 0 #336c2b;
}
＆＃13; 
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* END RESET */

/*  *{
 margin: 0; padding: 0; border: none;
 } */

nav {
  clear: both;
  /* faire un clear pour revenir a la ligne  */
  width: 960px;
  height: 50px;
  /* 	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	background-color: #3b7c33; */
  /* Fallback */
  border-radius: 30px;
  /* dora 3la kolchi   /*
	/* couleur degradé   /*
	/* Safari 4+, Chrome 1-9 */
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5fae53), to(#3b7c33));
  /* Safari 5.1+, Mobile Safari, Chrome 10+ */
  background-image: -webkit-linear-gradient(top, #5fae53, #3b7c33);
  /* Firefox 3.6+ */
  background-image: -moz-linear-gradient(top, #5fae53, #3b7c33);
  /* IE 10+ */
  background-image: -ms-linear-gradient(top, #5fae53, #3b7c33);
  /* Opera 11.10+ */
  background-image: -o-linear-gradient(top, #5fae53, #3b7c33);
  border: 1px solid #336c2b;
}
nav ul li {
  float: left;
  border-right: 1px solid #539948;
  border-left: 1px solid #336c2b;
  box-shadow: 1px 0 #336c2b;
}
nav ul li a {
  display: block;
  padding: 0 30px;
  height: 50px;
  line-height: 50px;
  font-size: 15px;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 1px 0 #387031;
}
nav ul li a:hover {
  background: #5fae53;
}
nav ul li.home {
  background: url(images/home.png) no-repeat 50% 50%;
  text-indent: -9999px;
  border-left: none;
}
nav ul li.home a:hover {
  /* -webkit-border-top-left-radius: 30px;
	-webkit-border-bottom-left-radius: 30px;
	*/
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
  background: #5fae53 url(images/home.png) no-repeat 50% 50%;
}
nav ul li.last {
  border-left: none;
  border-right: none;
  float: right;
  margin-right: 20px;
}
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题