Question

我想在CSS菜单中解决2个问题我正在编码，但我发现它无法处理它们。在我将代码放在这里之前，让我描述一下我的两个问题： 1）我想让所有li区域可点击而不是只有文字.. 2）我认为图像和文本没有垂直正确对齐，并且想要修复它。

另外：您可以在www.nfrases.com/modelo.php上看到我的代码

HTML：

<nav>
  <div class="drop-menu">
     <span class="plus">+</span><span class="droptexto">Navegação</span>
     <ul class="sub-menu">
        <li><a href="http://www.google.pt"><img src="/images/icon_info.png" alt="rss"> Acerca</a></li>
        <li><a href="http://www.google.pt"><img src="/images/icon_email.png" alt="rss"> Contactos</a></li>
     </ul>
  </div>
</nav>

CSS：

nav { width: 640px; float: right; }
.drop-menu { font-family: Arial, Helvetica, sans-serif; display: block; position: relative; margin: 0 auto; text-align: left; padding: 10px 10px; font-size: 22px; height: 30px; max-height: 30px; width: 120px; cursor: pointer; border-left: 1px solid #e7e4d4; border-right: 1px solid #e7e4d4; background: url("../images/bg_header.png") repeat scroll right top transparent; float: right; }
.drop-menu a, .drop-menu  a:visited { color: #464530; text-decoration: none; }
.drop-menu a:hover { color:#ff5400; }
.drop-menu span.droptexto { padding-left:10px; font-size: 20px; color: #ff5400; font-family: 'Leckerli One', cursive; }
.plus { display: inline-block; -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; color: #ff5400; }
.drop-menu:hover .plus { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); }
.drop-menu:hover { border-left: 1px solid #e7e4d4; border-right: 1px solid #e7e4d4; }
.drop-menu:hover .sub-menu { display: inline-block; }
.sub-menu { display: none; width: 120px; background: #fff; padding: 10px 10px; margin-left: -11px; margin-top: 12px; border: 1px solid #e7e4d4; -webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2); }
.sub-menu li { list-style-type: none; display: block; border: 1px; border-color: #fff; border-style: dotted; border-bottom: 1px dotted #eaeaea; font-size: 19px; height: 24px; padding: 8px 0; font-size: 12px; }
.sub-menu li img { margin-right: .5em; margin-left: .5em; }
.sub-menu li:hover { border: 1px; border-color: #ff5400; border-style: dotted; }

Answer 1

正如之前所建议的那样，使用display:block完整链接并定义宽度和高度或填充

.sub-menu li a {display:block; padding: 10px;}

要使图像和文本对齐到中心，最好的方法是将图像放在背景中，或者是li或'a'标签。不要忘记填充左边的shd大于图像的宽度。

.sub-menu li a.img1 { background-image:url(images/imagename.jpg); }

.sub-menu li a { background-position:center left; background-repeat: no-repeat; height: 20px; line-height: 20px; display: block; padding-left: 20px; }

即使你不想把图像放在背景中，也试试这个。它可能会奏效。根据图像的高度设置高度，或使用填充。

.sub-menu li a { height: 20px; line-height:20px; display: block;}

希望这有帮助！

Answer 2

1）

.drop-menu a {
    display:block;
   }

2）将左图像添加为<li>的背景图像，然后您可以水平居中图像和文本。

Answer 3

这样的事情可以胜任：http://jsfiddle.net/YGHNu/

要将完整链接设置为“display：block;”，请设置高度和边距。要使图像居中，请使用“vertical-align：middle”，然后使用margin-top将其移动一点。

导航菜单中的CSS编码问题

3 个答案: