布局基础--按钮

结构

<div class="con"><a href="#"><span>这是标题</span></a><a href="#"><span>这是标题但是长度比较长</span></a></div>

样式

.con a {
 line-height: 30px;
 background-image: url(41205957519.gif);
 background-position: left top;
 height: 30px;
 padding-left: 10px;
 display: block;
 margin-right: 20px;
 font-weight: bold;
 color: #FFFFFF;
 text-decoration: none;
}
.con a span {
 background-image: url(41205957519.gif);
 background-position: right top;
 height: 30px;
 display: block;
 padding-right: 10px;
}

注意

a span 用同一背景，一个左对齐，一个右对齐
a 设左填充 span 设右填充，实现居中