У меня есть аккордеон, в котором есть текстовое поле с гибкой строкой, а справа есть значки. Мне нужно добавить меню, расположенное так, как показано на рисунке ниже.
Мой код здесь
<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>
Возьмите свои «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>
Код, который я представил вам ранее (как показано ниже), отлично работает. Вы можете перечислить любой элемент, который вы хотите выровнять по гибкости в строке.
Проблема, с которой вы столкнулись, заключается в том, что код, который вы используете, не является семантически правильным. Например: у вас есть кнопки, вложенные в кнопки. Кнопка должна быть последним интерактивным элементом в иерархии. Я рекомендую вам изменить взаимодействие аккордеона на простое 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>
Я думаю, это определенно не тот окончательный результат, который он ищет.
Послушайте, вы не можете ссылаться на ответ своей проблемы Обратите внимание, если ваш вопрос был чем-то другим, пожалуйста, дайте мне знать
Просто создайте контейнерный 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>
Спасибо, не могли бы вы опубликовать весь фрагмент? Это решение не работает для меня