纯css没法实现，除非你的元素宽度完全写死，那样的话会有很多问题，还是用js来实现吧，我写的这个需要引入jquery
<div id="main"><p class="tocenterRight">哥哥</p>
<p class="tocenterRight">你哥哥</p>
<p class="tocenterRight">你的大哥哥</p>
</div>
<script src="jquery-3.2.1.min.js" type="application/javascript"></script>
<script>
$(document).ready(function(){
//传入type参数center-right 或者left-right 可以传入以后看下效果，第二个参数是要做对其的类名，自己测试一下。
textAlign("center-right",".tocenterRight")
})
var textAlign = function(type,classname){
var o = $(classname)
var maxwidth = 0
switch (type){
case "center-right" :
$(o).css("text-align","right")
if(o.length>0){
$(o).css("width",parseInt($($(o).parent()).width()/2))
}else{
console.log("找不到任何对象！")
}
break
case "left-right" :
$(o).css("text-align","right")
if(o.length>0){
for(var i=0i<o.lengthi++){
$(o[i]).css("display","inline")
maxwidth = parseInt($(o[i]).css("width"))>maxwidth ? parseInt($(o[i]).css("width")) : maxwidth
}
$(o).css("display","block")
$(o).css("width",maxwidth)
}else{
console.log("找不到任何对象！")
}
break
default :
break
}
}
</script>
两种对齐的效果看下图：
不改#slidingBlock {width:296px}
改栏目1，2，3的宽度(宽度自己调试)，代码如下
<!--特效代码区开始-->
<style type="text/css">
body {
font-size:12px
}
/* 当前模块的总宽度为250px，不合适的自己调整吧，另外改变相关图片的路径的话注意修改css样式代码的图片路径 */
#slidingBlock {
width:296pxborder:1px #95CF92 solidpadding:1pxover-flow:hidden
}
#slidingBlock h4 {
float:leftwidth:82pxheight:30pxline-height:25pxtext-align:centerfont-size:12pxover-flow:hidden
}
#slidingBlock h4.menuNo {
font-weight:normalcolor:#333333background:url(Skin/HLan/HuaDongA/slidingMenuQBlue2.gif) repeat-x
}
#slidingBlock h4.menuOn {
font-weight:boldcolor:#1F376Dbackground:url(Skin/HLan/HuaDongA/slidingMenuQBlue.gif) no-repeat
}
#slidingBlock DIV.slidingList_none {
display:none
}
#slidingBlock DIV.slidingList {
margin:0pxpadding:5pxheight:10px
}
#slidingBlock DIV.slidingList ul {
margin:0pxpadding:0px
}
#slidingBlock DIV.slidingList li span {
font-size:12pxfont-weight:normalcolor:#ffffffpadding-left:4pxpadding-right:8pxcolor:red
}
#slidingBlock DIV.slidingList li.one {
background:url(Skin/HLan/HuaDongA/slidingTag1.gif) no-repeat
}
#slidingBlock DIV.slidingList li.two {
background:url(Skin/HLan/HuaDongA/slidingTag2.gif) no-repeat
}
#slidingBlock DIV.slidingList li.thr {
background:url(Skin/HLan/HuaDongA/slidingTag3.gif) no-repeat
}
</style>
<div id="slidingBlock">
<script language="javascript">
function switchmodTag(modtag,modcontent,modk) {
for(i=1i <4i++) {
if (i==modk) {
document.getElementById(modtag+i).className="menuOn"document.getElementById(modcontent+i).className="slidingList"}
else {
document.getElementById(modtag+i).className="menuNo"document.getElementById(modcontent+i).className="slidingList_none"}
}
}
</script>
<h4 class="menuOn" id="mod1" onmouseover="switchmodTag('mod','slidingList','1')this.blur()">
最近更新</h4>
<h4 class="menuNo" id="mod2" onmouseover="switchmodTag('mod','slidingList','2')this.blur()">
近期推荐</h4>
<h4 class="menuNo" id="mod3" onmouseover="switchmodTag('mod','slidingList','3')this.blur()">
热门点击</h4>
<div class="slidingList" id="slidingList1" style="border:1px solid redwidth:100px">
<ul>
<li class="one"><span>1</span><a href="http://www.cinzy.com">栏目1</a></li>
</ul>
</div>
<div class="slidingList_none" id="slidingList2" style="margin-left:90pxwidth:100px">
<ul>
<li class="two"><span>1</span><a href="http://www.cinzy.com">栏目2</a></li>
</ul>
</div>
<div class="slidingList_none" id="slidingList3" style="margin-left:180pxwidth:100px">
<ul>
<li class="thr"><span>1</span><a href="http://www.cinzy.com">栏目3</a></li>
</ul>
</div>
</div>
<!--特效代码区结束-->
