Выпадающее меню не плавает в гибкой строке

У меня есть аккордеон, в котором есть текстовое поле с гибкой строкой, а справа есть значки. Мне нужно добавить меню, расположенное так, как показано на рисунке ниже.

Мой код здесь

<html>

<head>
  <style>
    .accordion {
      margin: 30px;
    }
    
    .accordion-button.collapsed {
      border-bottom: #ccc 1px solid
    }
    
    .accordion-body {
      border-left: #673ab744 1px solid;
      border-bottom: #673ab744 1px solid;
      border-right: #673ab744 1px solid
    }
    
    .accordion-button {
      display: inline!important
    }
    
    .flx-row {
      display: flex;
      justify-content: space-between;
    }
  </style>
  <script src = "/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>

<body>
  <script src = "/scripts/snippet-javascript-console.min.js?v=1"></script>
  <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin = "anonymous">
  <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin = "anonymous"></script>
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  <link rel = "stylesheet" href = "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0">

  <div class = "accordion accordion-flush" id = "accordionFlushExample">
    <div class = "accordion-item">
      <h2 class = "accordion-header" id = "flush-headingOne">
        <button class = "accordion-button collapsed" type = "button" data-bs-toggle = "collapse" data-bs-target = "#flush-collapseOne" aria-expanded = "false" aria-controls = "flush-collapseOne">
      
        <div class = "flx-row">          
          <div>
            <input type = "textbox" value = "Accordion Item #1">
          </div>
          <div>
          

        <div class = "btn-group">
            <button type = "button" class = "btn btn-sm dropdown-toggle" data-bs-toggle = "dropdown" aria-expanded = "false"> More </button>
        <ul class = "dropdown-menu dropdown-menu-lg-end" style = "">
          <li><a class = "dropdown-item" href = "#">Export</a></li>
          <li><a class = "dropdown-item" href = "#">Duplicate</a></li>
          <li><a class = "dropdown-item tdelete" href = "#">Delete</a></li>
        </ul>
    </div>

    <span class = "wcopy material-symbols-outlined text-primary">content_copy</span>
    <span class = "wdelete material-symbols-outlined text-primary">delete</span>





  </div>
  </div>

  <br><span>Desc goes here</span><br><span>Desc goes here</span>

  </button>
  </h2>
  <div id = "flush-collapseOne" class = "accordion-collapse collapse" aria-labelledby = "flush-headingOne" data-bs-parent = "#accordionFlushExample">
    <div class = "accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.</div>
  </div>
  </div>
  <div class = "accordion-item">
    <h2 class = "accordion-header" id = "flush-headingTwo">
      <button class = "accordion-button collapsed" type = "button" data-bs-toggle = "collapse" data-bs-target = "#flush-collapseTwo" aria-expanded = "false" aria-controls = "flush-collapseTwo">
          Accordion Item #2
      </button>
    </h2>
    <div id = "flush-collapseTwo" class = "accordion-collapse collapse" aria-labelledby = "flush-headingTwo" data-bs-parent = "#accordionFlushExample">
      <div class = "accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div>
    </div>
  </div>
  </div>

  <div class = "as-console-wrapper">
    <div class = "as-console"></div>
  </div>
  <script type = "text/javascript">
    $(".wdelete").off().on('click', function(event) {
      if (confirm(`Are you sure to delete the workflow ${$(this).prev().parent().prev().val()}?`) == true) {
        $(this).closest('.accordion-item').remove();
      }
      event.preventDefault();
      event.stopPropagation();
    });
  </script>

  <div class = "as-console-wrapper">
    <div class = "as-console"></div>
  </div>
  <div class = "as-console-wrapper">
    <div class = "as-console"></div>
  </div>
</body>

</html>
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
55
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Возьмите свои «Span Tags» для Icon Inside div класса «btn-group», тогда значки автоматически появятся рядом с раскрывающимся списком.

    <div class = "btn-group">

        <button type = "button" class = "btn btn-sm dropdown-toggle" data-bs- 
            toggle = "dropdown" aria-expanded = "false"> More </button>

        <ul class = "dropdown-menu dropdown-menu-lg-end">
            <li><a class = "dropdown-item" href = "#">Export</a></li>
            <li><a class = "dropdown-item" href = "#">Duplicate</a></li>
            <li><a class = "dropdown-item tdelete" href = "#">Delete</a></li>
        </ul>

           <span class = "wcopy material-symbols-outlined text- 
                 primary">content_copy</span>
          <span class = "wdelete material-symbols-outlined text- 
            primary">delete</span>

    </div>

Спасибо, не могли бы вы опубликовать весь фрагмент? Это решение не работает для меня

Code Guy 17.11.2022 10:30

Код, который я представил вам ранее (как показано ниже), отлично работает. Вы можете перечислить любой элемент, который вы хотите выровнять по гибкости в строке.

Проблема, с которой вы столкнулись, заключается в том, что код, который вы используете, не является семантически правильным. Например: у вас есть кнопки, вложенные в кнопки. Кнопка должна быть последним интерактивным элементом в иерархии. Я рекомендую вам изменить взаимодействие аккордеона на простое div.

После рефакторинга кода вы сможете легко выравнивать элементы в двумерном гибком массиве с помощью align-items.

Вы можете попытаться лучше понять гибкость, прежде чем двигаться дальше. https://developer.mozilla.org/en-US/docs/Web/CSS/flex

.pad {
  padding: 10px;
}

.flx-row {
  display: flex;
  justify-content: space-between;
}
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin = "anonymous">
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin = "anonymous"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0">


<div class = "flx-row pad">

  <div>
    <input type = "textbox" value = "Accordion Item #1" />
  </div>

  <div class = "btn-group">
    <button type = "button" class = "btn btn-sm dropdown-toggle" data-bs-toggle = "dropdown" aria-expanded = "false"> More </button>
    <ul class = "dropdown-menu dropdown-menu-lg-end" style = "">
      <li><a class = "dropdown-item" href = "#">Export</a></li>
      <li><a class = "dropdown-item" href = "#">Duplicate</a></li>
      <li><a class = "dropdown-item tdelete" href = "#">Delete</a></li>
    </ul>
  </div>

  <div>
    <span class = "wcopy material-symbols-outlined text-primary">content_copy</span>
    <span class = "wdelete material-symbols-outlined text-primary">delete</span>
  </div>

</div>

Я думаю, это определенно не тот окончательный результат, который он ищет.

Moussa Bistami 17.11.2022 17:42
Ответ принят как подходящий

Послушайте, вы не можете ссылаться на ответ своей проблемы Обратите внимание, если ваш вопрос был чем-то другим, пожалуйста, дайте мне знать

Просто создайте контейнерный div, а затем скажите своему div, что у него есть два дочерних элемента. Остался один (ваши предметы и варианты) И справа от ваших входов такой выпадающий список и этот значок удаления Так что просто забудьте о классе flex-row. Поместите весь код, показанный в вопросе, в div со стилем =

display:flex;

Затем Иметь два (div) с Первый div (ваши элементы #item ...) с формой =

flex:80%;

И div (раскрывающийся список и значок удаления...) со стилем =

flex:20%;

Так:

<div class='father-of-two-children'>
 <div class='left-hand-div'>
  My options ...#items..
 </div>
 <div class='right-hand-div'>
  delete icon ...dropdown list...
  It is based on your periority of 
  your items and inputs.they will 
  appear in order. 
 </div>
</div>
<style>
 .father-of-two-children{
   display:flex;
  }
 .left-hand-div{
   flex:80%;
 }
 .right-hand-div{
   flex:20%;
 }
</style>

Другие вопросы по теме