2014-01-22 2 views
1

Я пытаюсь поместить текст и его выпадающее меню в одну строку, но это невозможно, и я попытался использовать отображение: встроенный и отображаемый встроенный блок.Текст и его раскрывающийся список не в одной строке

Если я пытаюсь сделать то же самое снаружи (не в моем коде), он работает нормально. Можете ли вы предложить, какова может быть причина и какой CSS я могу применить для достижения того же.

Edge by: <select id="EdgeAlgorithm" onClick="UpdateMetricFromGUI()"> 
       <option value="Differential">Differential</option> 
       <option value="Threshold">Threshold</option> 
     </select> 

Выходной сигнал выходит как:

Краю по:
(выпадающий)

вместо:

Краю по: (выпадающего списка).

+0

сложно сказать без контекста, но я предполагаю, что эти элементы находятся внутри родительского элемента, который недостаточно широк, чтобы оба они соответствовали друг другу. – smerny

+2

Пожалуйста, покажите свой полный код .. это работает: http://jsfiddle.net/nJa45/ –

+0

Я предполагаю, что это так: http://jsfiddle.net/nJa45/1/, и в этом случае вы, вероятно, будете хотите восстановить его, сделав родителя более крупным. – smerny

ответ

0

Трудно сказать, не видя CSS и то, что контейнер из двух элементов выглядит, но если вы float: left в select и поместить текст в label или span и float что left он должен работать. Затем вы можете управлять width и оттуда.

Опять же, было бы здорово увидеть фактический CSS, который у вас есть.

0

Лучший способ иметь этикетку с правильным стилем - и, конечно же ширины должны быть в порядке (особенно родитель, который должен вместить обоих этих элементов в строке), но это будет что-то вроде этого:

<label for="EdgeAlgorithm" style="float:left">Edge by:</label><select id="EdgeAlgorithm" onClick="UpdateMetricFromGUI()" style="float:left"> 
       <option value="Differential">Differential</option> 
       <option value="Threshold">Threshold</option> 
     </select> 
+0

Привет, я пробовал это, и его работа единственная проблема - это не в строке. Выпадающий список немного вверх, чем остальные элементы, а в хроме он выходит только поверх текста. – PSDebugger

+0

Если я правильно вас понимаю, вам просто нужно добавить padding-top в стиль ярлыка и поставить правильное значение px - это зависит от используемого вами размера шрифта, от прокладки, которую вы можете иметь в самом элементе select и так на. Это немного изменит текст надписей «вниз» и таким образом вы центрируете его с текстом в элементе select. '

Смежные вопросы