CSS: поместите список кнопок горизонтально внутри div

Question

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

Как ни странно, после временного присвоения ul цвет фона, кажется, что ul все еще внутри div - это проблема элементов списка мошенников.Что происходит?

Мой XHTML:

<div class="accent-bar">
    <ul class="accents">
        <li id="first"><input type="button" name="a" id="a" value="&aacute;" /></li>
        <li><input type="button" name="e" id="e" value="&eacute;" /></li>
        <li><input type="button" name="i" id="i" value="&iacute;" /></li>
        <li><input type="button" name="n" id="n" value="&ntilde;" /></li>
        <li><input type="button" name="o" id="o" value="&oacute;" /></li>
        <li><input type="button" name="u" id="u" value="&uacute;" /></li>
        <li><input type="button" name="umlaut" id="u" value="&uuml;" /></li>
        <li><input type="button" name="?" id="?" value="&iquest;" /></li>
        <li id="last"><input type="button" name="!" id="!" value="&iexcl;" /></li>
    </ul>
</div>

Мой CSS:

.accent-bar {
    position: relative;
    height: 25px;
    border-top: #000000 1px solid;
    border-bottom: #000000 1px solid;
    }
    ul .accents {
        list-style-type: none;
        }
        ul.accents li {
            display: inline-block;
            margin-left: 5px;
            }
            ul.accents li#first {
                margin-left: 10px;
            }
            ul.accents li#last {
                margin: 1px 0 0 15px;
}

Answer 1

ОК, поэтому я понял, что мне нужно специально нацелиться на первую кнопку, чтобы кнопки двигались правильно.НЕ содержащий элемент списка;сама кнопка.

Попытка присвоить всем кнопкам отрицательные левые поля эффективно реверсирует их, но если дать только первую, остальные перемещаются соответственно.Вот код, который я сейчас использую:

.accent-bar {
    position: relative;
    height: 25px;
    border-top: #000000 1px solid;
    border-bottom: #000000 1px solid;
    }
    ul .accents {
        list-style-type: none;
        }
        ul.accents li {
            display: inline;
            margin-left: 15px;
            }
            ul.accents li#last {
                margin-right: 15px;
                }
                ul.accents li#first input {
                    margin-top: 18px;
                    margin-left: -250px;
}

Answer 2

Это прекрасно работает в Chrome, кнопки расположены горизонтально.
В IE, однако, он отображается вертикально, как вы говорите.
Я изменил display: inline-block; на display: inline; и теперь работаетв IE так же, как в Chrome.

Будет ли это работать для вас?

РЕДАКТИРОВАТЬ:
Чтобы выровнять его по левому краю:
Во-первых, убедитесь, что вы исправили ul .accentsна ul.accents (уберите пробел).
Во-вторых, чтобы удалить этот левый отступ, присвойте этому классу padding: 0px;, и он должен работать.

Что касается вертикального выравнивания, я не совсем уверен, чего здесь не хватает - это одна линия, над или под ней нет места для выравнивания внутри.Не могли бы вы уточнить эту часть?