0

下拉截图

这将是我的问题，我有一个未完全显示的下拉菜单。我什至不确定从哪里开始，所以这里是下拉列表周围的 HTML，我也会提供 CSS。

HTML

<div id="add_item">
 <ul class="vert">
  <li>
   <ul class="horz">
    <li class="name">
     <select style="width: 195px; padding: 0px; margin: 0px;" disabled="disabled">
      <option value=""></option>
      <option value="0">0</option>
     </select>

    </li>
    <li class="quantity">
     <select style="width: 50px; padding: 0px; margin: 0px;" disabled="disabled">
      <option value=""></option>
      <option value="0">0</option>
     </select>
    </li>
   </ul>

  </li>
 </ul>
</div>

代码的下拉菜单被禁用的原因是因为它是动态的，周围的 HTML 是相同的，除了有可供选择的选项并且不再被禁用。

CSS

div#byitem ul.horz li.name {
background:transparent none repeat scroll 0 0;
display:block;
font-size:11px;
font-weight:bold;
width:195px;
}

div#byitem ul.horz {
background:transparent none repeat scroll 0 0;
clear:left;
list-style-type:none;
margin:0;
padding:0;
}
   
div#byitem ul.vert li {
background:transparent none repeat scroll 0 0;
height:14px;
margin:0;
padding:0;
}

div#byitem ul.vert {
background:transparent none repeat scroll 0 0;
list-style-type:none;
margin:0;
padding:0;
width:540px;
}

element.style {
margin-bottom:0;
margin-left:0;
margin-right:0;
margin-top:0;
padding-bottom:0;
padding-left:0;
padding-right:0;
padding-top:0;
width:195px;
}
#content form select {
margin:0 0 4px 4px;
z-index:1;
}
html, body, div, p, form, input, select, textarea, fieldset {
-x-system-font:none;
color:#333333;
font-family:Arial,Helvetica,Verdana,sans-serif;
font-size:11px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:15px;
}
* {
margin:0;
padding:0;
}

感谢您的任何建议。

编辑

我已经为包含下拉菜单的 div 添加了 CSS。更改行高也没有什么区别。两个下拉菜单（项目和数量）之间的唯一区别是宽度。更改 Item 的宽度并没有什么不同。

取出 Add another item 链接，因为这被怀疑是一个问题，没有变化。我也在 Firefox 中进行开发，我刚刚发布了来自 Safari 的屏幕截图。

4

7 回答 7

2

看起来您正在设置“line-height:15px;” 关于“选择”元素。删除它，看看它是否能解决问题。

于 2008-12-17T17:47:36.380 回答
1

如果您元素上的样式对于相同类型（宽度除外）都是相同的，那么似乎唯一可能的罪魁祸首是页面中的周围元素。例如，有问题的下拉列表下方的“添加另一个项目”链接的 css/html 是什么？

于 2008-12-17T18:04:55.143 回答
1

我建议使用 Firefox 中的Firebug插件检查您的页面。它可以显示和更改分配给您的元素的 CSS 样式，您将立即解决问题。

于 2008-12-17T18:20:11.150 回答
0

它可能不是 DDL，但页面上的其他内容可能覆盖了它的一部分。在 FireFox 中，在 DDL 底部的空白处尝试“检查元素”。

于 2008-12-17T18:46:46.107 回答
0

下拉菜单可能没有区别；但是，根据您提供的代码，LI包含它们的 s 存在差异。

您为所有列表项设置了基本样式，但也为li.name. 我会专注于div#byitem ul.horz li.name风格。没有足够的代码让我在本地重现它，但我猜那display: block是罪魁祸首。

于 2008-12-17T19:07:26.440 回答
0

杰罗米是正确的，区别在于包含选择的 li 和考虑到您正在浮动 li 的周围元素。

尝试更改以下样式的高度，看看你的结果是什么。

div#byitem ul.vert li {
    background:transparent none repeat scroll 0 0;
    height:17px;
    margin:0;
    padding:0;
}

希望这可以帮助您追踪它。

于 2008-12-17T22:02:19.753 回答
0

即使它最终没有解决问题，我强烈建议将height:声明从 theli和select元素中删除。显示大小将取决于浏览器使用的字体。由于您无法控制用户计算机上安装的字体，因此您无法保证浏览器将使用哪种字体。这些高度迟早会给您带来问题（并且可能是您当前问题的原因）。

于 2008-12-17T22:17:40.220 回答