我有一个可以悬停的菜单。项目列表如下。我想对它进行样式设置，使图像显示在最左侧，文本显示在最右侧。
HTML：
<td style="width:30px" class="tableIconHambMenuBlackBgOnly">
<ul id="css3menu1">
<li>
<a href="#" title="Hamburger Menu">
<span><img src="./images/hamburgMenu_16px_Black.png" width="16px" height="16px" alt=""></span>
</a>
<ul>
<li><a href="#"><img src="./images/img1.png" alt="">text1</a>
</li>
<li><a href="#"><img src="./images/img2.png" alt="">text2</a>
</li>
<li><a href="#"><img src="./images/img3.png" alt="">text3</a>
</li>
<li><a href="#"><img src="./images/img4.png" alt="">text4</a>
</li>
</ul>
</li>
</ul>
</td>
我尝试插入div，但布局中断。
CSS：
ul#css3menu1,ul#css3menu1 ul{
list-style:none;background-color:none;border-width:0px;border-style:transparent;display:inline-block;}
ul#css3menu1 ul{
visibility:hidden;position:absolute;right:30px;top:0;opacity:0;-moz-transition:all 0.5s;-webkit-transition:opacity 0.5s;-o-transition:opacity 0.5s,visibility 0.5s;transition:opacity 0.5s;background-color:#transparent;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;padding:4px 4px 0px;}
ul#css3menu1 li:hover>ul{
visibility:visible;opacity:1; z-index:9999;}
ul#css3menu1 li{
width:200px;position:relative;display:block;font-size:0;border-width:1px;}
ul#css3menu1 li:hover{
}
ul#css3menu1 ul ul{
position:absolute;right:100%;top:0;-moz-box-shadow:0px 0px 0px #63dbc3;-webkit-box-shadow:0px 0px 0px #63dbc3;box-shadow:0px 0px 0px #63dbc3;}
ul#css3menu1{
width:20px;font-size:0;position:absolute;display:block;float:left;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;margin-top:6px;}
ul#css3menu1>li{
width:30px;margin:-12px 0px 0px -30px;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
outline-style:none;}
ul#css3menu1 a{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:12px ROsans,Arial,sans-serif;color:#000000;cursor:pointer;padding:0px 2px;background-color:transparent;border-width:0px;border-style:transparent;}
ul#css3menu1 ul li{
float:right; margin:-6px 2px 0px 1px;}
ul#css3menu1 ul a{
text-align:left;padding:10px;background-color:#f6d4b2;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:12px ROsans,Arial,sans-serif;color:#000000;text-decoration:none;border-style:solid;border-color:#fff;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
border-style:none;color:#000000;text-decoration:none;border-style:solid;border-color:#fff;}
ul#css3menu1 ul li img{
border:none;vertical-align:middle;margin-right:20px;padding-left:5px;}
ul#css3menu1 span{
display:block;overflow:visible;background-image:url("arrowsub.gif");background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 ul span{
background-image:url("arrowsub.gif");padding-right:0px;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{
background-color:#fbead9;color:#000000;text-decoration:none;}
ul#css3menu1 li.topmenu>a{
background-color:#f6d4b2;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;}
ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu a.pressed{
background-color:#f6d4b2;}您可以像在float：left上一样向图像添加一个float，在li上可以将文本右对齐。
ul#css3menu1 li { text-align:right}
ul#css3menu1 li img {float:left}
这样，您可以保持html不变
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句