首页 文章

将标签链接移动到博客的右侧

提问于
浏览
1

我很感激在编写我的博主博客时遇到的一个问题的帮助 - http://www.blankesque.com .

我希望标签/“页面”链接显示在屏幕的右侧 . 我已设法通过三个下拉菜单选项卡/'页面'链接执行此操作,但是没有下拉菜单的标签链接 - Headers 为'联系人' - 不会出现在右侧的其他元素旁边屏幕 .

我试图添加以下代码来解决此问题:

#wctopdropnav li{
float : right;
}

然而,如果我使用上述编码,则会出现另一个问题 . 虽然选项卡确实出现在屏幕的右侧,但是其他三个选项卡的下拉菜单选项的文本/链接也出现在右侧,但我理想的是希望它们留在左侧 . 下面我已经包含了整个导航栏编码 .

<style>

#wctopdropcont { /* width of the main bar categories */
width:100%;
height:40px;
display:block;
padding: 0;
margin-left: -16px;

z-index:100;
top:0px;
left:0px;
position:fixed;

background:#ffffff;
opacity: 0.6;
filter: alpha(opacity=60);
  }

#wctopdropnav{ /* social */
float: right;
width:900px;
height:7px;
display:block;
padding:0;
margin-left:30px;
}
#wctopdropnav ul{
float:right;
margin:0;
padding:0;

}
#wctopdropnav li{
float:left;
list-style:none;
line-height:35px;
margin:0;
padding:6.5px;/* height of the clicked bar */
background:#ffffff;
}

#wctopdropnav li a, #wctopdropnav li a:link{
color:#000000;
float:right;
display:block;
margin: 0px;
text-transform: uppercase;
font:11px cantarell!important;
padding: 5px;
text-decoration:none;
letter-spacing : 0.13em;
}
#wctopdropnav li a:hover, #wctopdropnav li a:active,
#wctopdropnav .current_page_item a  {
color:black;
font-weight: bold;
padding: 5px;
background: white; /* Old browsers */
background: white;
background: white;
background: white;
background: white;
background: white;
background: white;
filter:black;  
}
#wctopdropnav li li a, #wctopdropnav li li a:link, #wctopdropnav li li a:visited{
font-size: 11px;
background:#ffffff;
color: #000000;
width: 100px;
margin: 0;
padding: 0px 1px;
line-height:20px;
position: relative;
}

#wctopdropnav li li a:hover, #wctopdropnav li li a:active {
color: black;
background: white;
background: white;
background: white;
background: white;
background: white;
background: white;
background: white;
filter: white;
}
#wctopdropnav li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin:0px;
padding:0px
}

#wctopdropnav li:hover ul, #wctopdropnav li li:hover ul, #wctopdropnav li li li:hover ul, #wctopdropnav li.sfhover ul, #topwctopdropnav li li.sfhover ul, #topwctopdropnav li li li.sfhover ul{
left:auto
}

#wctopdropnav li:hover, #wctopdropnav li.sfhover{
position:static
}
</style>


<div id='wctopdropcont'>
<div id='wctopdropnav'>
     <ul>
       <li><a href='#'>Blankesque</a> 
<ul>
<li><a href='http://www.blankesque.com'>Home</a></li>
<li><a href='http://www.blankesque.com/p/about-blankesque-blog.html'>About</a></li>
<li><a href='http://www.blankesque.com/p/disclaimer-policy_13.html'>Policies</a></li>
         </ul></li>
<li><a href='#'>Social</a>
<ul>
<li><a href='http://www.pinterest.com/blankesque'>Pinterest</a></li>
<li><a href='http://www.twitter.com/itsblankesque.com'>Twitter</a></li>
<li><a href='http://www.bloglovin.com/people/aladyinwhite-8315551'>Bloglovin</a></li>
<li><a href='http://www.instagram.com/blankesque/blankesquexo'>Instagram</a></li>
</ul></li>
<li><a href='#'>Features</a>

         <ul>
              <li><a href='http://www.blankesque.com/search/label/Beauty'>Beauty</a></li>
              <li><a href='http://www.blankesque.com/search/label/Creative'>Creative</a></li>
           <li><a href='http://www.blankesque.com/search/label/Fashion'>Fashion</a></li>
              <li><a href='http://www.blankesque.com/search/label/Favourites'>Favourites</a></li>
              <li><a href='http://www.blankesque.com/search/label/Fragrance'>Fragrance</a></li>
           <li><a href='http://www.blankesque.com/search/label/Hair'>Hair</a></li>
           <li><a href='http://www.blankesque.com/search/label/Haul'>Haul</a></li>
              <li><a href='http://www.blankesque.com/search/label/Life'>Life</a></li>
           <li><a href='http://www.blankesque.com/search/label/Skincare'>Skincare</a></li>
           </ul>
       </li></ul>
<li><a href='#'>Contact</a></li>

</div>
</div>

我尝试了各种不同的方法,但无济于事,如果有人能帮助我解决这个问题,那么我将非常感激 .

先感谢您,

IRAM

1 回答

  • 0

    您应该首先将 li contact 放在 ul 中,如下所示:

    <div id="wctopdropnav">
    <ul>
    <li><a href="#">Blankesque</a>
    <ul>
    <li><a href="http://www.blankesque.com">Home</a></li>
    <li><a href="http://www.blankesque.com/p/about-blankesque-blog.html">About</a></li>
    <li><a href="http://www.blankesque.com/p/disclaimer-policy_13.html">Policies</a></li>
    </ul></li>
    <li><a href="#">Social</a>
    <ul>
    <li><a href="http://www.pinterest.com/blankesque">Pinterest</a></li>
    <li><a href="http://www.twitter.com/itsblankesque.com">Twitter</a></li>
    <li><a href="http://www.bloglovin.com/people/aladyinwhite-8315551">Bloglovin</a></li>
    <li><a href="http://www.instagram.com/blankesque/blankesquexo">Instagram</a></li>
    </ul></li>
    <li><a href="#">Features</a>
    <ul>
    <li><a href="http://www.blankesque.com/search/label/Beauty">Beauty</a></li>
    <li><a href="http://www.blankesque.com/search/label/Creative">Creative</a></li>
    <li><a href="http://www.blankesque.com/search/label/Fashion">Fashion</a></li>
    <li><a href="http://www.blankesque.com/search/label/Favourites">Favourites</a></li>
    <li><a href="http://www.blankesque.com/search/label/Fragrance">Fragrance</a></li>
    <li><a href="http://www.blankesque.com/search/label/Hair">Hair</a></li>
    <li><a href="http://www.blankesque.com/search/label/Haul">Haul</a></li>
    <li><a href="http://www.blankesque.com/search/label/Life">Life</a></li>
    <li><a href="http://www.blankesque.com/search/label/Skincare">Skincare</a></li>
    </ul>
    </li>
    <li><a href="#">Contact</a></li><!-- RIGHT HERE -->
    </ul>
    
    </div>
    

    见例子:https://jsfiddle.net/pyexm7us/

相关问题