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

我试图将按钮列表放在一起，因此它们都适合于宽而窄的条形。我的代码工作时，按钮列表是一个图像链接列表，但将其改为实际按钮取代他们。现在他们已经到了最上方，并且正确。CSS：将按钮列表水平地放在div中

在暂时给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; 
}

来源

2010-12-10 user460847

显示您当前看到的内容和您期望的内容的图片将非常有帮助。 – 2010-12-10 02:52:35

这只是正常在Chrome中，使用按钮水平布局。
然而，在IE中，它会像你说的那样垂直出来。
我将display: inline-block;更改为display: inline;，它现在在IE中工作，就像在Chrome中一样。

这样可以吗？

编辑：
为了使它靠左对齐边缘：
首先，确保你正确ul .accents到ul.accents（删除空格）。
其次，要删除该左侧压痕，请给该类padding: 0px;，它应该工作。

至于垂直对齐，我不确定这里缺少的是什么 - 这是一行，上面或下面没有空间来对齐。你能澄清这部分吗？

来源

2010-12-10 02:25:51 BeemerGuy

这确实将它们在两个浏览器中水平放置，但它们仍未正确放置。他们应该垂直居中，并从盒子左侧开始，似乎无论我如何使用边距或定位，我都无法实现这一点。 – user460847 2010-12-10 02:34:28

@ user460847 - 我编辑了答案来涵盖这些问题。 – BeemerGuy 2010-12-10 02:54:35

好的，所以我想通了，我需要专门针对按钮本身的第一个按钮来正确移动。不是包含的列表项目;按钮本身。

试图让所有按钮的负左边缘有效地扭转它们，但只给第一个按钮使其余部分适当移动。以下是我现在使用的代码：

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

来源

2010-12-10 02:54:24 user460847

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

回答

相关问题