第一种:<div class="one">
<ul>
<li><a href="#" style="border-radius:5px 0 0 5px;">注册字母邮箱</a>
<li><a href="#" style="border-left: none; border-right: none;">注册手机号码邮箱</a>
<li><a href="#" style="border-radius:0 5px 5px 0;">注册VIP邮箱</a>
</ul>
</div>
CSS样式
.one{
width: 500px;
height: 200px;
margin: 200px auto;
}
.one a{
width: 140px;
height: 30px;
text-decoration: none;
display: block;
text-align: center;
line-height: 30px;
}
.one ul li{
float: left;//设置浮动,让标签并排显示
list-style: none;//设置li的的样式
}
a:link {
background: #FFFFFF;
color: #000000;
border:1px solid #999999 ;//给超链接a加边框
<ul>
<li><span>这里是文字</span></li>
<li><span>这里是文字</span></li>
<li><span>这里是文字</span></li>
</ul>
CSS样式
li{
list-style: none;
float: left;
border: 1px solid blue;
}
.li{
border-right: none;
}
.li1{
border-radius:5px 0 0 5px ;//给li加圆角边框
}
.li2{
border-radius:0 5px 5px 0 ;
<ul>
<li><a href="#" style="border-radius:5px 0 0 5px;">注册字母邮箱</a>
<li><a href="#" style="border-left: none; border-right: none;">注册手机号码邮箱</a>
<li><a href="#" style="border-radius:0 5px 5px 0;">注册VIP邮箱</a>
</ul>
</div>
CSS样式
.one{
width: 500px;
height: 200px;
margin: 200px auto;
}
.one a{
width: 140px;
height: 30px;
text-decoration: none;
display: block;
text-align: center;
line-height: 30px;
}
.one ul li{
float: left;//设置浮动,让标签并排显示
list-style: none;//设置li的的样式
}
a:link {
background: #FFFFFF;
color: #000000;
border:1px solid #999999 ;//给超链接a加边框
}
<ul>
<li><span>这里是文字</span></li>
<li><span>这里是文字</span></li>
<li><span>这里是文字</span></li>
</ul>
CSS样式
li{
list-style: none;
float: left;
border: 1px solid blue;
}
.li{
border-right: none;
}
.li1{
border-radius:5px 0 0 5px ;//给li加圆角边框
}
.li2{
border-radius:0 5px 5px 0 ;
}