Question

如何在li项目中并排插入两个超链接？

在下面的html代码中，我需要将“login”和“register”链接并排分开“|”。以下代码需要进行哪些修改才能完成任务。

感谢。

html文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"></html> 
<html> 
<head> 
        <link href="styledel.css" rel="stylesheet" type="text/css" />
</head> 

<body>
<div id="navcontainer">
                <ul id="navlist">   
                     <li><a href="index.php">Home</a></li>
                    <li><a href="index.php">The Tool </a>                       
                        <ul id="subnavlist">
                            <li><a href="subtitle1.php" target = "_blank">Secondary Link</a></li>
                    </ul>
                        </li>
                    <li><a href="tutorials.php">Tutorials &AMP; FAQs</a></li>
                <li><a href="login.php" target="_blank">Login</a> | <a href="user_add.php" target="_blank">Register</a></li>      
        </ul>
</div>

</body>
</html>

css文件：

#navcontainer
{
border-right: 1px solid #000000;
padding: 0px;  /* menu look*/
font-family: 'Courier New',Courier,monospace;
background-color: #d4cfcf;
}

#navcontainer ul
{
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}

#navcontainer li
{

border-bottom: 1px solid #90bade; /*separator*/
margin: 0;
}

#navcontainer li a  /*menu */
{
display: block;
padding: 5px .3em 5px .3em;
border-left: .3em solid #1958b7;
border-right: .3em solid #508fc4;
color: #004963;
text-decoration: none;
}

#navcontainer li a:hover  /*behavior on hover */
{
background-color: #ffffff;
color: #ad0000; 
}

#navcontainer li li   /*sub menu*/
{   
border-top: 1px solid #90bade;
border-bottom: 0;
margin: 0;
font-family: 'Courier New',Courier,monospace;
font-size: 13px;
}

#    navcontainer li li a  /* sub menu */
{
padding: 4px 4px 4px 15px;
color: #5b6f7b /* light slate color: #00788a  color of text */
}
/* navigation menu end */

非常感谢。

Answer 1

现在代码是UA，链接应该是并排的。如果他们不这样做，那是因为他们没有足够的空间。这可能是因为您设置的宽度太小，或者边距和填充减少了可用空间。

如果您希望列表项位于一行中，则可以使用display:inline

#nav li{display:inline}
ul{list-style:none;} /* because you don't want a list with inline items to have bullets. */

Answer 2

尝试将一小部分CSS从<a>标记切换到<li>元素，如下所示，从display:block移除li a并移动边界装饰到li。然后，在您#navcontainer li li的位置，设置border-left:0px和border-right:0px;

，删除边框装饰

#navcontainer  li
{
 padding: 5px .3em 5px .3em;
 border-left: .3em solid #1958b7;
border-right: .3em solid #508fc4;
border-bottom: 1px solid #90bade; /*separator*/
margin: 0;
}





color: #004963;
text-decoration: none;
}

#navcontainer li a:hover  /*behavior on hover */
{
background-color: #ffffff;
color: #ad0000; 
}

#navcontainer li li   /*sub menu*/
{   
border-top: 1px solid #90bade;
border-bottom: 0;
margin: 0;
font-family: 'Courier New',Courier,monospace;
font-size: 13px;
border-left:0px;
border-right:0px;
}

#navcontainer li li a  /* sub menu */
{
padding: 4px 4px 4px 15px;
color: #5b6f7b /* light slate color: #00788a  color of text */
}
/* navigation menu end */

<li>列表项</li>中的两个超链接

2 个答案: