Question

我正在尝试创建一个HTML网页，其中顶部是一些菜单选项，然后在框中我要显示一些列表项。我使用下面的代码来实现相同的目的：

<body>
<div id="admin">
<div id="header">
<span id="show_all" onclick="showAll();" class="nolite">All</span>
<span id="show_words" onclick="showWords();" class="nolite">Blocked Words</span>
<span id="show_ip" onclick="showIP();" class="nolite">Blocked IP</span>
<span id="show_url" onclick="showURL();" class="nolite">Blocked URL</span>
<span id="show_filtered" onclick="showFiltered();" class="nolite">Authorized System</span>
</div>
</div>
<div>
<table width="auto" border="1" cellspacing="0" cellpadding="0" >
<td nowrap>
<select name="selectFilter" id="selectFilter" size="23">
<option>test1</option>
<option>test2</option>
<option>test3</option>
</select>
</td>
</table>
</div>
</body>

通过AJAX调用，我正在成功更新selectFilter选项值。但问题是选择框位于菜单选项的左侧，并且不会扩展太多以覆盖浏览器窗口。我已经附上了结果页面的外观： Resulet Page

如何在我的菜单选项下方显示选择选项并覆盖浏览器窗口，从底部，顶部（菜单顶部之后），左侧和右侧留下边距？

以下是我正在使用的CSS：

#icon {
  position: absolute;
  left: 50px;
  top: 50px;
}

#content {
  position: absolute;
  left: 230px;
  top: 70px;
  width: 400px;
}

#ok_btn {
  position: absolute;
  left: 20px;
  cursor: pointer;
}

#cancel_btn {
  position: absolute;
  left: 150px;
  cursor: pointer;
}

#header {
  position: absolute;
  left: 50px;
  top: 20px;
}

#show_all, #show_words, #show_ip, #show_url, #show_filtered {
  cursor: pointer;
}

.button {
  cursor: pointer;
}

.hilite {
  background: #f88017;
  color: #ffffff;
  padding: 5px;
}

.nolite {
  background: #ffffff;
  color: #000000;
  padding: 5px;
}

.denied {
  text-decoration: line-through;
}

#table {
  position: absolute;
  left: 50px;
  top: 60px;
  right: 50px;
  bottom: 10px;
  overflow: auto;
  border: 1px solid black;
}

.row {
  padding: 2px;
}

Answer 1

我不确定你的样式表，但添加它会使它覆盖带有边距的浏览器。

table { width:96%;margin:1% ;}
select {width:100%}

选择选项未正确显示

1 个答案: