怎么去掉右边框

Posted 2023-05-07

【中文标题】怎么去掉右边框

【英文标题】：How to remove right border

【发布时间】：2014-08-05 13:50:39

【问题描述】：

你们知道如何删除我的下拉菜单上的右边框吗？我试过放 right-border: none、right-border: hidden 和 right-border: 0px 但什么都没有！

html：

<section class="menu">
        <ul>
            <li><a class="active" href="#"> PORTFOLIO </a>
                <ul>
                    <li><a href="#"> illustrations </a></li>
                    <li><a href="#"> portraits </a></li>
                    <li><a href="#"> environments </a></li>
                    <li><a href="#"> life drawings </a></li>
                </ul>
            </li>

            <li><a href="#"> STORE </a>
              <ul>
                    <li><a href="#" target="_blank"> society6 </a></li>
                    <li><a href="#" target="_blank"> redbubble </a></li>
                </ul>
            </li>
            <li><a href="#"> CONTACT </a></li>
            <li><a href="#"> ABOUT </a></li>
        </ul>

    </section>

CSS：

.menu 
height:29px;
width:100%;
/*background:orange;*/


.menu ul 
width:auto;
list-style-type:none;
font-family:"calibri", "arial";


.menu ul li 
position:relative;
display:inline;
float:left;
width:auto;
border-right: 2px solid purple;
margin-left:10px;
line-height:12px;


.menu ul li a 
display:block;
padding:3px;
color:#854288;
text-decoration:none; 
font-size:20px;
font-weight:strong;
padding-right:25px;



.menu ul li a:hover, .active 
color:#788d35


.menu ul li ul 
display:none;


.menu ul li:hover > ul 
display:block;
position:absolute;
top:23px;
float:left;
padding-left:20px;
text-align:left;
margin-left: -30px;



.menu ul li ul li 
position:relative;
min-width:135px;
max-width:1350px;
width:100%;


.menu ul li ul li a 
padding: 3px;
margin-left: 1px;
border-right: hidden; /* <---- DOES NOT WORK */

【参考方案1】：

这会从主菜单中删除border（在最后一项关于之后）：

.menu ul li:last-child border:none; 

JSFiddle

如果您还想从嵌套的lis 中删除border，则应将border:none 添加到.menu ul li ul li：

JSFiddle

【讨论】：

非常感谢！解决了我的问题！

【参考方案2】：

试试这个

   #right_border_less

            border:solid;
            border-right:none;
        

【讨论】：

您应该扩展您的答案以解释这如何以及为什么解决了 OP 的问题。当答案包含一些上下文而不是代码时，答案会更有用。