Question

include('wsa.urls')

＆＃13;

http://jsfiddle.net/2esybgmo/

＆＃13;

html {

  margin: 20px;

  background: url("Images/background.png")center no-repeat fixed;

}

ul,

img {

  margin: 0;

  padding: 0;

  vertical-align: middle;

}

.menu,

.dropdown-menu {

  list-style-type: none;

  background-color: white;

  border-radius: 7px;

}

.menu li {

  margin-left: -4px;

  display: inline-block;

  text-align: center;

  border-right: 1px solid #eaeaea;

}

.menu li:first-child {

  background-color: #4b424f;

  border-top-left-radius: 7px;

  border-bottom-left-radius: 7px;

}

.menu li a {

  color: black;

  display: block;

  height: 100%;

  padding: 17px 25px;

  font-family: 'Montserrat', sans-serif;

  font-size: 12px;

  text-decoration: none;

  margin: 0;

}

.menu li:hover .dropdown-menu {

  display: block;

}

ul.dropdown-menu {

  position: absolute;

  border-top-right-radius: 0;

  border-top-left-radius: 0;

  border: none;

  display: none;

}

ul.dropdown-menu li {

  display: block;

  text-align: left;

  margin: 0;

  border: none;

  border-bottom: 1px solid #eaeaea;

}

ul.dropdown-menu li:last-child {

  border: none;

}

ul.dropdown-menu li:first-child {

  border-top: 1px solid #eaeaea;

  background-color: White;

  border-top-left-radius: 0;

}

＆＃13;

我希望li元素中的灰色线条（border-right）像以前一样填充整个ul区域（以及标签）。将图像添加到列表后，有几个像素＆＃34;缺少＆＃34;我认为问题是因为图像本身比标签内的文本高一点。怎么做而不改变图像或文字大小？

CSS：内置可点击徽标的菜单

0 个答案: