客戶服務下面的幫助中心無法文本對齊呢


/*測試屬性*/
#top,#top_main,#nav,#banner,#main,#foot_box,#footer{
border:1px solid red;
}


/*頁面通用樣式*/
body{
font:12px "微軟雅黑",arial,helvetica,sans-serif;
color:#666;
margin:0;
}
a,p,h1,h2,h3,h4,h5,h6,ul,li,ol,dl,dd{
margin:0;
padding:0;
list-style:none;
}
.lf{float:left;}
.rt{float:right;}
.clear{clear:both;}
a{
color:#666;
text-decoration:none;
}
a:hover{
color:#ff0700;
text-decoration:underline;
}
/*布局樣式*/
#top_box,#top_main,#nav,#banner,#main,#foot_box,#footer{
width:100%;
margin:0 auto;
}
/*#top灰色長條*/
#top{
/*寬度 高度 背景*/
width:100%;
height:30px;
background-color:#f7f7f7;
line-height:30px;
}
#top_box img{
/*上外邊距 右外邊距*/
margin-top:9px;
margin-right:5px;
}
#top_box ul li{
float:left;
margin-right:5px;
}
/*列表項中的b標記,模擬分割線,(邊框)*/
#top_box ul li b{
border-left:1px solid #ddd;
margin-right:5px;
}
/*會員俱樂部背景圖片*/
li.vip a{
/*左內邊距:(24+5),背景屬性*/
padding-left:29px;
background:url(Images/vip.jpg) no-repeat left center;
}
/*企業頻道背景圖片*/
li.bjd a{
/*左內邊距:(21+5),背景屬性*/
padding-left:26px;
background:url(Images/dakehu.jpg) no-repeat left center;
}
/*企業頻道背景圖片*/
li.shouji a{
/*左內邊距:(13+5),行內快,高度,行高*/
padding-left:18px;
background:url(Images/iconlist_2.png) no-repeat -128px -360px;
height:22px;
line-height:22px;
display:inline-block;
}
li.shouji a:hover{
background-position:-128px -399px;
}
/*企業頻道背景圖片*/
li.service>a{
/*左右內邊距模擬元素高度*/
padding:0 15px;
/*行內快,高度,行高*/
display:inline-block;
height:26px;
/*邊框:左右上(透明)*/
border:1px solid transparent;
border-bottom:0px;
/*背景*/
background:url(Images/jt_down.jpg) no-repeat 95% center;
}

/*客戶服務彈出菜單*/
li.service{
/*相對定位 配合#service_items做絕對到位*/
position:relative;
}
#service_items{
/*寬度 左右下邊框,背景顏色*/
width:80px;
border:1px solid #ddd;
box-sizing:border-box;
border-top:0px;
background-color:#fff;
/*文本水平對齊*/
text-align:center;
position:absolute;
top:28px;
left:6px;
/*默認隱藏*/
display:none;

}
li.service:hover #service_items{
display:block;
}
li.service:hover>a{
/*邊框顏色 背景顏色 更換背景圖*/
border-color:#ddd;
background-color:#fff;
background:url(Images/jt_up.jpg) no-repeat 95% 65%;
}



<!doctype html>
<html>
<head>
  <title>京東首頁</title>
  <meta charset="utf-8">
  <!-- 引入jd-index.css文件 -->
  <link rel="stylesheet" href="jd_index.css">
</head>
    <body>
<!-- 1、頁面頂部 -->
<!-- w:100% h:30px background:灰色 -->
<header id="top">
<!-- w:1211px h:30px background:灰色-->
<div id="top_box">
<!-- 五角星圖片(左浮動) -->
<img src="Images/star.jpg" class="lf">
<!-- 收藏京東 超鏈接(左浮動) -->
<a href="#" class="lf">收藏京東</a>
<!-- 文字 列表(右浮動) -->
<ul class="rt">
<li>
您好。歡迎來到京東!
<a href="#">登錄</a>
<a href="#">免費注冊</a>
</li>
<li>
<!-- 左側分割線(邊框) -->
<b></b>
<a href="#">我的訂單</a>
</li>
<li class="vip">
<!-- 左側分割線(邊框) -->
<b></b>
<a href="#">會員俱樂部</a>
</li>
<li class="bjd">
<!-- 左側分割線(邊框) -->
<b></b>
<a href="#">
企業頻道
</a>
</li>
<li class="shouji">
<!-- 左側分割線(邊框) -->
<b></b>
<a href="#">手機京東</a>
</li>
<li class="service">
<!-- 左側分割線(邊框) -->
<b></b>
<a href="#">客戶服務</a>
<!-- 彈出菜單 -->
<ul id="service_items">
<li>
<a href="#">幫助中心</a>
</li>
<li>
<a href="#">售后服務</a>
</li>
<li>
<a href="#">在線客服</a>
</li>
<li>
<a href="#">投訴中心</a>
</li>
<li>
<a href="#">客戶郵箱</a>
</li>
</ul>
</li>
<li>
<!-- 左側分割線(邊框) -->
<b></b>
<a href="#">網址導航</a>
</li>
</ul>
</div>
</header>
    <!-- 2、logo和搜索框 -->
<div id="top_main">
logo和搜索框
</div>
<!-- 1、頁面主導航 -->
<nav id="nav">
頁面主導航
</nav>
<!-- 1、babber部分 -->
<div id="banner">
babber部分
</div>
<!-- 1、頁面主體 -->
<section id="main">
頁面主體
</section>
<!-- 1、頁面底部-購物指南 -->
<footer id="foot_box">
頁面底部-購物指南
</footer>
<!-- 1、頁面底部-備案后等 -->
<footer id="footer">
頁面底部-備案后等
</footer>
</body>
</html>

1 个解决方案

#1


在css加入:
#service_items a {
    margin-left: 15px;
}

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com