Выберите опцию, которая не отображается должным образом

Question

Выберите опцию, которая не отображается должным образом

0

Я пытаюсь создать веб-страницу 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. Но проблема в том, что поле выбора находится слева от параметров меню и не сильно расширяется, чтобы закрыть окно браузера. Я добавил, как выглядит страница результатов:

Как я могу сделать опцию выбора, которая будет отображаться под моим опцией меню, и опустить окно браузера с полями слева внизу, сверху (после верхнего меню), влево и вправо?

Ниже приведен 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;
}

Programmer 02 дек. 2013, в 09:49

Источник

1

Похоже, проблема стиля, которую вы должны опубликовать свои таблицы стилей, а также
shyam 02 дек. 2013, в 08:31
0

Я добавил свою таблицу стилей в вопрос
Programmer 02 дек. 2013, в 08:46

Теги:

javascript

html

1 ответ

Ещё вопросы

Похоже, проблема стиля, которую вы должны опубликовать свои таблицы стилей, а также
Я добавил свою таблицу стилей в вопрос

Neha · Accepted Answer · 2013-12-02T05-43-00.000Z

Я не уверен в ваших таблицах стилей, но добавление этого приведет к тому, что он покроет браузер с полями.

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

Я добавил свою таблицу стилей в вопрос. Я пытался использовать ваши комментарии в моей таблице стилей, но все еще проблема
Спасибо за подсказку - с манипуляциями с моим CSS я смог достичь цели