【问题标题】:Positioning the buttons in div tag under the anchor element将 div 标签中的按钮定位在锚元素下
【发布时间】:2020-06-16 15:57:55
【问题描述】:
    <div class="row">
     <div class="card px-3">
          <asp:Repeater ID="Repeater1" runat="server">
               <HeaderTemplate>
                    <div id="video-gallery" class="row lightGallery">
               </HeaderTemplate>
               <ItemTemplate>
                    <a class="image-tile col-xl-3 col-lg-3 col-md-3 col-md-4 col-6" href='<%#Eval("VideoURL").ToString() %>'>
                         <img src='<%# getYouTubeThumbnail(Eval("VideoURL").ToString()) %>' alt="thumb image"/>
                         <div class="demo-gallery-poster">
                              <img src="../panel/images/lightbox/play-button.png" alt="thumb image">
                         </div>                                                           
                    </a>

                    <%--i want to put here two buttons. delete and edit--%>
                   <div>
                       <a href='<%# "Video.aspx?Edit="+Eval("VideoID")%>' class="btn btn-outline-primary">Edit</a>
                       <a onclick="return confirm('Are you sure?')" href='<%# "Video.aspx?Delete="+Eval("VideoID")%>' class="btn btn-outline-danger">Delete</a>
                   </div>

               </ItemTemplate>
               <FooterTemplate>
                    </div>
               </FooterTemplate>
          </asp:Repeater>
     </div>
</div>

我想在视频下方创建删除和编辑按钮,但这些按钮出现在视频右侧 preview 有什么想法吗?

【问题讨论】:

  • &lt;a class="image-tile col-xl-3 col-lg-3 col-md-3 col-md-4 col-6" href='&lt;%#Eval("VideoURL").ToString() %&gt;'&gt; 包裹在div
  • 同样的结果。按钮仍然出现在右侧

标签: html css button video absolute


【解决方案1】:

<div>
  <div class="image">
    <img src="https://dummyimage.com/600x400/000/#050505" />
  </div>
  <div class="buttons">
    <a href="">Edit</a>
    <a href="">Delete</a>
  </div>
</div>

试试这个代码。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2016-01-26
    • 2012-08-12
    • 1970-01-01
    • 1970-01-01
    • 2015-11-12
    • 1970-01-01
    • 2019-05-19
    • 1970-01-01
    相关资源
    最近更新 更多