Блог

Главная - Вопросы по программированию - Горизонтальное выравнивание многих кнопок в UL в ASP.NET

Горизонтальное выравнивание многих кнопок в UL в ASP.NET

#javascript #jquery #html #css #asp.net

#javascript #jquery #HTML #css #asp.net

Вопрос:

Я создал список кнопок, используя 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 я проявился внутри HTML . Я не уверен, какой CSS добавить, чтобы упорядочить UL по горизонтали.

Комментарии:

1. <asp:Button> на самом деле отображается как <input type="submit"> , поэтому ваш css должен ссылаться на входной тег.

Ответ №1:

Вы можете использовать display: inline ( float:left также будет работать) для li своих элементов, чтобы отображать их горизонтально:

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

В ASP.NET веб-форма код для .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>

Комментарии:

1. я пытался, но это не сработает .. может быть, это потому, что я использую <asp:Button> ? пожалуйста, дайте мне решение для ASP.NET пуговица..

2. @ManoPrathibhanC в ASP.NET <asp:Button> будет отображаться как <input type"submit" ... /> . Я запустил это в VS, и оно все еще работало, мое показывает, что вы используете <asp:Button> ? Я привел <asp:Button> ‘ы, которые я использовал в своей среде, в редактировании выше.

Ответ №2:

Ответ, приведенный выше, совершенно правильный.Но он использует CSS.

Я нашел простое решение для вашего ответа, которое немного отличается и также неудобно. Но я пишу только для того, чтобы вы знали.

Если вы знаете слово с именем

 nbsp;

используется для определения расстояния между двумя тегами. Таким образом, вы можете использовать один тег li и сделать 3 кнопки внутри него (только 1 тег li). Но используйте amp; before между двумя входными тегами.

 <li>
      <input type="button" ID="button_1" value="Button 1" /> amp;nbsp; 
      <input type="button" ID="button_2" value="Button 2" /> amp;nbsp; 
      <input type="button" ID="button_3" value="Button 3" /> amp;nbsp; 
</li>
Метки: