2013-08-27 65 views
-4

我试图有一个链接显示在白色,没有下划线。文本颜色正确显示为白色,但蓝色下划线固执地持续存在。我试过文字装饰:没有;和文字装饰:无!重要;在CSS中删除链接下划线。都没有工作。text-decoration:none;没有做任何事情

所有代码:

<?php session_start(); ?> 
<!DOCTYPE html> 
<html> 
<head> 
<title>Forum</title> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" /> 
<script type="text/javascript" src="js/bootstrap.js"></script> 
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet"> 
</head> 

<body class="body"> 
<div class="container"> 
<div class="row-fluid"> 
<div class="span4 box"> 
<div class="border5">Categories</div> 
<div class="border_box category_cat">NETWORK ANNOUNCEMENTS</div> 
<a href="http://localhost/forum/view_category.php?cid=3"> 
<li class="border3">&#8627; <span class="glyphicon glyphicon-folder-close"></span> Hide And Seek<span class="label label-info left">0</span></li></a> 
<div class="border_box category_cat">GENERAL</div> 
<div href="" class="border text">&#8627; <span class="glyphicon glyphicon-folder-close"></span> Questions<span class="label label-info left">0</span></div> 
<div href="" class="border3 text">&#8627; <span class="glyphicon glyphicon-folder-close"></span> Bugs<span class="label label-info left">0</span></div> 
<div class="border_box category_cat">HIDE AND SEEK</div> 
<div href="" class="border3 text">&#8627; <span class="glyphicon glyphicon-folder-close"></span> General Discussions<span class="label label-info left">0</span></div> 
<div href="" class="border1 text">&#8627; <span class="glyphicon glyphicon-folder-close"></span> Suggestions And Feedback<span class="label label-info left">0</span></div> 
<div href="" class="border1 text">&#8627; <span class="glyphicon glyphicon-folder-close"></span> Bugs<span class="label label-info left">0</span></div> 
<div class="border_box category_cat">OFF TOPIC</div> 
<div href="" class="border3 text">&#8627; <span class="glyphicon glyphicon-folder-close"></span> Minecraft<span class="label label-info left">0</span></div> 
<div href="" class="border1 text">&#8627; <span class="glyphicon glyphicon-folder-close"></span> Non-Gaming<span class="label label-info left">0</span></div> 
<div href="" class="border1 text">&#8627; <span class="glyphicon glyphicon-folder-close"></span> Gaming<span class="label label-info left">0</span></div> 
<div class="border_box category_cat">REPORTS AND APPEALS</div> 
<div href="" class="border3 text">&#8627; <span class="glyphicon glyphicon-folder-close"></span> Player Reports<span class="label label-info left">0</span></div> 
<div href="" class="border6 text">&#8627; <span class="glyphicon glyphicon-folder-close"></span> Appeals<span class="label label-info left">0</span></div> 
</div> 
<div class="span8"> 
<h3>My First Forum!</h3> 
<hr /> 
<?php 
if (!isset($_SESSION['uid'])) { 
    echo "<form action='login_parse.php' method='post'> 
    Username: <input type='text' name='username' />&nbsp; 
    Password: <input type='password' name='password' />&nbsp; 
    <input type='submit' name='submit' value='Log In' /> 
    "; 

} else { 
    echo "<p>You are logged in as ".$_SESSION['username']." &bull; <a href='logout_parse.php'>Logout</a>"; 
} 
?> 

<hr /> 
<div id="content"> 
<?php 
include_once("connect.php"); 
$sql = "SELECT * FROM topics ORDER BY topic_date ASC"; 
$res = mysql_query($sql) or die(mysql_error()); 
$topics=''; 
if (mysql_num_rows($res) > 0) { 
    while ($row = mysql_fetch_assoc($res)) { 
     $id = $row['id']; 
     $title = $row['topic_title']; 
     $cid = $row['category_id']; 
     $topics .= "<a href='view_topic.php?cid=".$cid."&tid=".$id."' class='cat_links'>".$title."<font size='-1'></font></a>"; 
    } 
    echo $topics; 
} else { 
    echo "<p>There are no topics available yet.</p>"; 
} 
?> 
</div> 
</div> 


</body> 
</html> 
</div> 
</div> 

所有的CSS代码:

.cat_links { 
    display: block; 
    padding: 5px; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    border: 1px solid #000000; 
    margin-bottom: 5px; 
    background-color: #cccccc; 
    color: #000000; 
} 
.cat_links:hover { 
    background-color: #dddddd; 
} 
.border { 
    border-top: 1px solid #DDD; 
    float: none; 
    font-weight: 700; 
    padding: 6px 15px; 
    text-align: left; 
    width: 300px; 
    height: 33px; 
    background-color: #FFF; 
    color: #0088cc; 
    text-decoration: none; 
} 
.text { 
    color: #0088cc; 
    text-decoration: none; 
} 
.border1 { 
    border-bottom: 1px solid #DDD; 
    display: block; 
    float: none; 
    font-weight: 700; 
    padding: 6px 15px; 
    text-align: left; 
    width: 300px; 
    height: 33px; 
    color: #0088cc; 
    background-color: #FFF; 
    text-decoration: none; 
} 
.border2 { 
    display: block; 
    float: none; 
    font-weight: 700; 
    padding: 6px 15px; 
    text-align: left; 
    width: 300px; 
    height: 33px; 
    color: #0088cc; 
    text-decoration: none; 
    background-color: #FFF; 
} 
.category_cat { 
    margin: 10px 0; 
    font-family: inherit; 
    font-weight: bold; 
    line-height: 20px; 
    color: inherit; 
    text-rendering: optimizelegibility; 
    font-size: 17.5px; 
    color: #888; 
    margin-top: 0px; 
    margin-bottom: 0px; 
     background-color: #FFF; 
} 
.border3 { 
    display: block; 
    float: none; 
    font-weight: 700; 
    padding: 6px 15px; 
    text-align: left; 
    border-bottom: 1px solid #DDD; 
    border-top: 1px solid #DDD; 
    background-color: #FFF; 
    text-decoration: none; 
} 
.left { 
    float: right; 
} 
.label-info:hover { 
    background-color: #2d6987; 
} 
.label:hover { 
color: #ffffff; 
text-decoration: none; 
} 
.box_cat { 
    width: 300px; 
    height: 33px; 
} 
.border3:hover { 
    background-color: #F6F6F6; 
    text-decoration: none; 
} 
.border:hover { 
    background-color: #F6F6F6; 
} 
.border1:hover { 
    background-color: #F6F6F6; 
} 
.border2:hover { 
    background-color: #F6F6F6; 
} 
.border6:hover { 
    background-color: #F6F6F6; 
} 
.border_box { 
    display: block; 
    float: none; 
    font-weight: 700; 
    padding: 6px 15px; 
    text-align: left; 
    width: 300px; 
    height: 33px; 
    text-decoration: none; 
    color: #888; 
     background-color: #FFF; 
} 
.border5 { 
    border-bottom: 1px solid #DDD; 
    display: block; 
    float: none; 
    font-weight: 700; 
    padding: 6px 15px; 
    text-align: left; 
    width: 300px; 
    height: 33px; 
    color: #0088cc; 
    text-decoration: none; 
    color: #333; 
    background-color: whiteSmoke; 
    border-radius: 4px 4px 0 0; 
} 
.body { 
    background-color: #C12727; 
} 
.box { 
    background-color: #F9F9F9; 
    border-radius: 4px; 
    box-shadow: 0 0 0 transparent; 
    margin-bottom: 9px; 
} 
.border6 { 
    border-radius: 0 0 4px 4px; 
    border-bottom: 1px solid #DDD; 
    display: block; 
    float: none; 
    font-weight: 700; 
    padding: 6px 15px; 
    text-align: left; 
    width: 300px; 
    height: 33px; 
    color: #0088cc; 
    background-color: #FFF; 
    text-decoration: none; 
} 
.span4 { 
    margin-top: 10px; 
} 
.border3 a { 
    text-decoration: none; 
    } 
+4

不能在锚标签包装列表项。 – j08691

+0

一切工作在CSS和代码没有文本装饰:无; ...... –

+0

仅仅因为它似乎工作并不意味着它是有效的代码,并且无效的代码可能会导致更多的问题,因为应该应用的规则导致意外的行为。 – j08691

回答

1

你有没有尝试过的造型链接一般直接?

a { 
text-decoration: none; 
} 

或者

.border3 a { 
text-decoration: none; 
    } 

如果你想只在特别是那些链接,财产

+0

nopp,line still there –

+0

适合我这里: http://jsfiddle.net/LwstQ/2/ 而我把你所有的代码! – Dikeneko

+0

不适合我,因为我所有的引导档案 –

2

你的HTML是无效的(你不能环绕列表项的锚),但这个CSS将解决您的问题:

a { 
    text-decoration: none; 
} 

jsFiddle example

+0

不在我身边发生..:/ –

+0

什么不是在你身边发生? – j08691

+0

这条线还在那里 –

0

您正在将text-decoration: none应用于列表而非链接。 它应该是:

a { 
text-decoration: none; 
} 
0

anchor元素应该是列表的元素:

<li class="border3"><a href="#">Something</a></li> 

不是相反。

然后你可以将CSS作为Dikeneko说

.border3 a { 
    text-decoration: none; 
} 
1

只使用

a{text-decoration: none !important;}