我正在创建菜单栏

Question

我正在使用HTML和CSS创建菜单栏，我想在菜单文本周围放置一个居中的边框

我正在使用此代码。请告诉我这是对的吗？

edx

.menu-text ul{
    list-style:none;
    color: #330000;
    margin: 18px -12px;
}
.menu-text ul li{
    display:inline;
    margin:19px;
    text-shadow:#cc6633 0px 1px 1px;
    font-size :17px;
    font-weight:bold;
    border-right: 1px solid #FFF;

}
.menu-text ul li a{
    text-decoration:none;
    color: #333333;
}

Answer 1

尝试这种风格

.menu-text ul li {
     display: inline;
     text-shadow: #cc6633 0px 1px 1px;
     font-size: 17px;
     font-weight: bold;
     border-right: 1px solid #FFF;
     border-right: 1px solid #513737;
     padding-right: 35px;
     background-color: rgb(193, 234, 142);
     padding-left: 35px;
}

Answer 2

＆＃13;

＆＃13;

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.menu-text ul{
	list-style: none;
	color: #330000;	
    background: #CCCC9A;
    text-align: center;
}
.menu-text ul li{
	display:inline-block;	
	text-shadow:#cc6633 0px 1px 1px;
	font-size :17px;
	font-weight:bold;
	border-left: 1px solid #FFF;
}
.menu-text ul li:first-child{
    border: none;
}
.menu-text ul li a{
	text-decoration:none;
	color: #333333;
    display: block;
    padding: 15px;
}

＆＃13;

<div class="menu-text">
<ul>
   <li><a href="#"> Home</a> </li>
   
   <li><a href="#"> Operator</a></li>
   
   <li><a href="#"> Drive </a></li>
   
   <li><a href="#"> Booking </a></li>
   
   <li><a href="#"> Rider </a></li>
   
   <li><a href="#"> Logout </a></li>
</ul>
</div>

＆＃13;

＆＃13;

＆＃13;