две гиперссылки внутри элемента списка <li> - PullRequest
Новая
       18

две гиперссылки внутри элемента списка <li>

1 голос
/ 27 марта 2012

Как вставить две гиперссылки рядом друг с другом внутри элемента li?

В приведенном ниже html-коде мне нужно поставить ссылку «логин» и «зарегистрировать» рядом друг с другом через «|». Какие изменения необходимы в приведенном ниже коде для выполнения задачи.

Спасибо.

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 */

Спасибо за тонну.

Ответы [ 2 ]

1 голос
/ 27 марта 2012

UA код сейчас, ссылки должны быть рядом.Если они этого не делают, это потому, что у них недостаточно места.Это может быть вызвано тем, что вы устанавливаете слишком маленькую ширину или поля и отступы уменьшают доступное пространство.

Если вы хотите, чтобы элементы списка были в одной строке, вы используете display:inline для них 

#nav li{display:inline}
ul{list-style:none;} /* because you don't want a list with inline items to have bullets. */
0 голосов
/ 27 марта 2012

Попробуйте вместо этого немного переключить 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 */​
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...