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

Horizontal align of many Buttons in UL in ASP.NET

本文关键字：许多 按钮 水平 对齐 ASP NET 中的 UL      更新时间：2023-09-26

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

#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 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>

这里我想安排他们和显示按钮作为水平列表，而不是垂直..我怎么能做到这一点?实际上，我想在ASP中这样做。. NET <asp:Button>而不是<input type="submit">，但由于这里的代码片段不支持ASP。. NET i在HTML中显示。我不确定添加什么CSS来安排UL水平方式

你可以在你的li元素上使用display: inline ( float:left也可以)来水平显示它们:

#div_buttons li {
  display: inline;
}

的例子:

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

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

以上答案完全正确。但是它使用了CSS

对于你的答案，我找到了一个简单的解决方案，有点不同，也不方便。但我写这封信只是为了让你知道。

如果你知道一个叫做

的词<>之前,之前

用于两个标签之间的间距。所以你可以使用一个li标签，并在它里面做3个按钮(1个li标签)。但是使用&之前,在两个输入标签之间

<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>
相关文章：