Блог

Главная - Вопросы по программированию - CSS не работает, пытаюсь разместить значок li и корзины в одной строке рядом друг с другом

CSS не работает, пытаюсь разместить значок li и корзины в одной строке рядом друг с другом

#css

Вопрос:

Я пытаюсь встроить значок удаления в li, но когда я использую встроенный блок, ничего не меняется. Я также попытался установить для оформления текста значение «нет», чтобы на ли не было маркированных точек, но это тоже ничего не дало. Я не понимаю, почему мой css не работает. Пожалуйста, помогите!

   <div id="menu">
    <h1>{{menu.menu_event}} Menu:</h1>
    <ul id='itemList'>
        {% for item in menu.menu_items %}
        <a href="/menus/{{menu.menu_id}}/recipe/{{item.item_id}}"><li id='itemName'>{{item.item_name}}</li></a>
        <form id='item' action="/menus/{{menu.menu_id}}/{{item.item_id}}" method="POST">
          <i id='trash' class="far fa-trash-alt" style="color: red;"></i>
        </form>
        {%endfor%}
    </ul>
  </div>

CSS

 #menu {
    text-align: center;
    border: 2px solid black;
}

#item {
    display: inline-block;
}

#itemName {
    text-decoration: none;
}

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

1. Попробуйте установить встроенный вместо встроенного блока? Или, может быть, сделать форму встроенной

2. Не могли бы вы удалить 3-е языки, такие как {{}} , {%%} . Это трудно проверить.

3. И еще, я буду благодарен, если вы добавите фрагмент, пожалуйста

4. Добавить list-style: none; к #itemName

Ответ №1:

🙂

 #menu {
  text-align: center;
  border: 2px solid black;
}

#item {
  display: inline-block;
}

#itemName {
  text-decoration: none;
  list-style: none;
} 
 <div id="menu">
  <h1>Menu:</h1>
  <ul id='itemList'>

    <a href="/menus/">
      <li id='itemName'>fdfdfd</li>
    </a>
    <form id='item' action="/menus/" method="POST">
      <i id='trash' class="far fa-trash-alt" style="color: red;"></i>
    </form>
  </ul>
</div>
Метки: ,