2013-04-24 68 views
-2

我有,我在试图把这项CSS结果不会中途.. 我尝试编辑CSS在google.com 发现此刻的CSS问题,但仍不能,,,也许是因为我的CSS的知识较少..如何让这个CSS在中间?

它的这个HTML。

<div class='menu'> 
<a href='clearsessions.php'><span>Home</span></a> 
<a href='#'><span>Blog</span></a> 
<a href='#'><span>Buy Followers</span></a> 
<a href='#'><span>Contact</span></a> 
</div 

CSS

.menu:after, .menu:before { 
margin-top:0.5em; 
content: ""; 
float:left; 
border:1.5em solid rgba(0, 159, 234, 0.3);} 
.menu:after { 
border-right-color:transparent;} 
.menu:before { 
border-left-color:transparent; 
} 
.menu a:link, .menu a:visited { 
color:#fff; 
text-decoration:none; 
float:left; 
height:3.5em; 
overflow:hidden;} 
.menu span { 
background:rgba(0, 159, 234, 0.3); 
display:inline-block; 
line-height:3em; 
padding:0 1em; 
margin-top:0.5em; 
position:relative; 
-webkit-transition: background, margin 0.2s; 
-moz-transition: background, margin 0.2s; 
-o-transition: background-color, margin-top 0.2s; 
transition: background, margin 0.2s; 
} 
.menu a:hover span { 
background:rgba(0, 159, 234, 0.5); 
margin-top:0; 
} 
.menu span:before { 
content: ""; 
position:absolute; 
top:3em; 
left:0; 
border-right:0.5em solid #9B8651; 
border-bottom:0.5em solid rgba(0, 159, 234, 0.3); 
} 
.menu span:after { 
content: ""; 
position:absolute; 
top:3em; 
right:0; 
border-left:0.5em solid #9B8651; 
border-bottom:0.5em solid rgba(0, 159, 234, 0.3);} 

请帮助,, :(

+0

你想做什么? – 2013-04-24 12:31:59

+0

添加一个链接到现场演示或JSFiddle将有助于很多事情。此外,缩进你的CSS会使读起来更容易。 一个小小的观察:你的结束标记'<\div>'缺少它的右侧括号。 – Dre 2013-04-24 12:34:59

回答

0

你需要把它添加到你的CSS:

.menu{ 
    position: relative; 
    left: 50%; 
    margin-left: -212px; 
} 

你需要找到准确的保证金左PX的

+0

好的,,,谢谢:) – user2286089 2013-04-24 12:53:50

+0

Makasih Banyak ... :) =非常感谢你.. :) – user2286089 2013-04-24 12:57:24