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

这在Chrome中运行得很好，按钮水平放置然而，在IE中，它就像你说的那样垂直出现我将display: inline-block;更改为display: inline;，它现在可以在IE中使用，就像在Chrome中一样。

这会对你有用吗？

修改
使其与左边缘对齐：
首先，请务必将ul .accents更正为ul.accents（删除空格）其次，要删除左侧缩进，请提供该类padding: 0px;，它应该可以工作。

至于垂直对齐，我不确定这里缺少什么 - 它是一条线，它上方或下方没有空间可以对齐。你能澄清一下吗？

Answer 2

好的，所以我发现我需要专门针对第一个按钮本身才能使按钮正常移动。不是包含列表项;按钮本身。

试图给所有按钮左侧边距带来负面效果，但只给出第一个按钮会使其余部分适当移动。这是我现在使用的代码：

.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;
}

CSS：将按钮列表水平放在div中

2 个答案: