css 图标未放置在右上方

inb24sb2 于 2022-11-19 发布在其他

关注(0)|答案(2)|浏览(117)

我想把图标移到右上方，正好正好在文本框的右边。我已经添加了浮动，也尝试了顶部：30%，但这是不正确的定位
Mu代码在这里

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

.wactions
{
    float:right!important
}
    </style>
    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>
<body>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/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">
                    <input type="textbox" value="Accordion Item #1"/><br><Span>Desc goes here</span><br><Span>Desc goes here</span>
                    <div class="wactions">
                        <span class="wcopy material-symbols-outlined text-primary">content_copy</span>&nbsp;&nbsp;
                        <span class="wdelete material-symbols-outlined text-primary">delete</span>
                    </div>

                </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>
    <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></body></html>

css

来源：https://stackoverflow.com/questions/74462708/icons-are-not-postioning-to-top-right

2条答案

按热度按时间

zf9nrax11#

就我个人而言，我会忘记float.flex是这些天要走的路。

<div class="flx-row">          
  <div>
    <input type="textbox"/>
  </div>
  <div>
    <span>content_copy</span>
    <span>delete</span>
  </div>
</div>

.flx-row {
  display:flex;
  justify-content:space-between;
}

完整示例

第一个

赞(0）回复(0）举报 2022-11-19

dxpyg8gm2#

对于这些问题，您应该首先有一个容器div . Look at this pic :Red border is div container blacks are children

<div class='container'>
 <div class='left-your-options'>
  input and foo options ...
 </div>
 <div class='right-icons-top'>
  icons here
 </div>
</div>

<style>
.container{
display:flex;
}
.right-icons-top{
flex:20%;
}
.left-your-options{
flex:80%;
}
</style>

赞(0）回复(0）举报 2022-11-19

我来回答

css 图标未放置在右上方

2条答案

相关问题

热门标签

最新问答