Question

我有一个可以悬停的菜单。项目清单如下。我希望以这样的方式设计它，使图像显示在最左侧，而文本显示在最右侧。

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：

＆＃13;

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;}

＆＃13;

Answer 1

你可以像浮动一样在图像上添加一个浮点数：左边和你可以把文字右对齐..

ul#css3menu1 li { text-align:right}
ul#css3menu1 li img {float:left}

这样你可以保持html相同

Answer 2

我使用的是背景图片，因为这些图片的内容极不可能。样式应该在CSS中。

li {
  background-position: center left 4px;
  background-repeat: no-repeat;
  line-height: 1.25rem;
  width: 200px;
  text-align: right;
  list-style-type: none;
  border: 1px solid red;
  padding: 4px;
  margin-bottom: 4px;
}
li.home {
  background-image: url(http://lorempixel.com/output/abstract-q-c-16-16-5.jpg);
}
li.contact {
  background-image: url(http://lorempixel.com/output/abstract-q-c-16-16-4.jpg);
}

<ul>
  <li class="home">Home</li>
  <li class="contact">Contact</li>
</ul>

作为奖励，它使HTML更清晰，并允许悬停效果。

样式列表项目菜单

2 个答案: