Question

http://jsfiddle.net/ritz/7YTbH/1/ 您好，我有一个问题对齐一个元素。我希望将文本“菜单”与我的

元素对齐，但发生的事情是文本“菜单”正在考虑我的范围。我已经尝试给我的“菜单”文本提供一个元素，但我没有用这种方法成功。你能给我一些帮助，以便能看到光明吗？

我的问题是：

我的HTML ：

<nav id="menu-topics-container">
    <div id="menu-topics">
         <div id="demo">
          <h4>
            <span>
                <img src="menu-alt.png">
             </span>
             Home
          </h4>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contacts</a></li>          
          </ul>
        </div>
    </div>
</nav>

我的css：

 *{margin:0; padding:0; border:none;}
 body{background:#fff; font-family:'arial'; min-width:320px;}
 #menu-topics-container{width:100%; height:auto; line-height:40px; background-color:#1A252B;float:left;}
 #menu-topics{width:320px; height:40px; line-height:40px; margin:0 auto 0 auto;}
 #menu-topics span img{margin-left:5px;}
 #menu-topics h4{width:320px; font-family:'arial'; font-size:16px; line-height:40px; height:40px; text-align:center;color:#fff; text-decoration:none; margin-top:2px;}
 #menu-topics h4  a{text-decoration:none; color:#fff; background:#FF0;}
 #menu-topics h4 span{float:left; line-height:52px; height:36px; margin-top:4px;}
 #menu-topics  ul {list-style-type:none; }
 #menu-categorias  ul li{width:320px; height:36px; line-height:36px; background:#333; color:#fff;margin:0; float:left; font-family:'arial';border-bottom:1px solid #fff;}
 #menu-topics  ul li a {width:320px; height:36px; line-height:36px; background:#333; color:#fff; display:block; text-align:center; text-decoration:none; float:left; margin:0;}

Answer 1

将position: relative添加到您的H4，然后将position: absolute添加到您的范围内，并将其与left和top相对于包含它的H4进行定位。< / p>

在中心奇怪的问题上对齐元素

1 个答案: