Почему в gwt список шириной 120px короче, чем текстовое поле шириной 120px?

Question

Я работаю над простым приложением GWT.

У меня есть FlexTable, внутри него есть метки и виджеты ввода (например, список, текстовое поле, средство выбора даты ...) с этим шаблоном:
LABEL INPUT LABEL INPUT
LABEL INPUT LABEL INPUT
и так далее, поэтому у меня есть два столбца полей ввода с их описаниями. Я установил setwidth("120px") для каждого из этих входных виджетов, поэтому я ожидал, что они будут выстроены в ряд (по вертикали). но это не так! элемент listbox короче текстового поля без видимой причины.
Может кто-нибудь объяснить мне?

Answer 1

Игра по этой ссылке должна дать вам лучшее понимание. скрипка здесь

Текстовое поле шириной 120px будет иметь ширину 120, затем будет добавлена ​​граница (1px с каждой стороны), а также добавлены отступы (1px с каждой стороны), что составит текстовое поле шириной 124px. Однако в поле со списком общая ширина, включая границы и отступы, будет 120. Ключевым моментом здесь является то, что если вам нужно текстовое поле шириной 120px, и у вас есть граница 1px с каждой стороны и отступы 1px с каждой стороны, тогда вам нужно установить ширину 116px. Оставьте выделение как 120px.

Answer 2

Есть должно быть очевидных причин, я также попробовал ваше дело, но я не сталкивался с такой проблемой, он должен быть с вашей стороны, попробуйте использовать firebug, вы можете найти что-то оттуда.Вот то, что я получил с кодом, который вы описали, я не добавил никакого стиля CSS, кроме setWidth("120px"):

Answer 3

Вы боретесь с двумя разными моделями боксов. Если вы установите оба параметра на box-sizing:border-box (может потребоваться префикс поставщика), вы увидите последовательный рендеринг.

Смотрите здесь: http://paulirish.com/2012/box-sizing-border-box-ftw/