Question

我使用ul创建了一个按钮列表，如下面代码所示，

＆＃13;

#div_buttons ul {
  padding: 0;
  margin: 0;
  list-style: none;
  list-style-type: none;
  display: inline-block;
}

#div_buttons ul input {
    text-decoration: none;
}

＆＃13;

<div id="div_buttons">
  <ul>
    <li><input type="button" ID="button_1" value="Button 1" /></li><br />
    <li><input type="button" ID="button_2" value="Button 2" /></li><br />
    <li><input type="button" ID="button_3" value="Button 3" /></li><br />
  </ul>
</div>

＆＃13;

在这里，我想安排它们并将按钮显示为水平列表而不是垂直。我可以这样做吗？实际上我想在ASP.NET <asp:Button>而不是<input type="submit">中执行此操作，但由于此处的代码段不支持在HTML中显示的ASP.NET。我不确定要添加哪些CSS以横向方式安排UL。

Answer 1

您可以在display: inline元素上使用float:left（ li也可以）来水平显示它们：

#div_buttons li {
  display: inline;
}

示例：

＆＃13;

#div_buttons ul {
  padding: 0;
  margin: 0;
  list-style: none;
  list-style-type: none;
  display: inline-block;
}

#div_buttons ul input {
    text-decoration: none;
}

#div_buttons li {
  display: inline;
}

＆＃13;

<div id="div_buttons">
  <ul>
    <li><input type="button" ID="button_1" value="Button 1" /></li>
    <li><input type="button" ID="button_2" value="Button 2" /></li>
    <li><input type="button" ID="button_3" value="Button 3" /></li>
  </ul>
</div>

＆＃13;

在ASP.NET Web表单中，.aspx文件的代码如下所示：

<form id="form1" runat="server">
    <div id="div_buttons">
      <ul>
        <li><asp:Button runat="server" Text="Button 1" ID="Button_1" /></li>
        <li><asp:Button runat="server" Text="Button 2" ID="Button_2" /></li>
        <li><asp:Button runat="server" Text="Button 3" ID="Button_3" /></li>
      </ul>
    </div>
</form>

Answer 2

上面给出的答案是完全正确的。但它使用CSS。

我找到了一个简单的解决方案，你的答案有点不同，也很不方便。但我写的只是出于你的知识目的。

如果您知道名为

的单词

 nbsp;

用于两个标签之间的间距。因此，您可以使用一个li标签并在其中制作3个按钮（仅限1个li标签）。但是使用＆amp;之前在两个输入标签之间。

<li>
      <input type="button" ID="button_1" value="Button 1" /> &nbsp; 
      <input type="button" ID="button_2" value="Button 2" /> &nbsp; 
      <input type="button" ID="button_3" value="Button 3" /> &nbsp; 
</li>

ASP.NET中UL中许多按钮的水平对齐

2 个答案: