HTML / CSS中的播放按鈕對齊問題

Question

我在左側有一個標題，想要在標題的右側添加一個內聯按鈕。

當我添加“ position：relative：”和“ top：400px”時，它完美地移動了按鈕。當我添加“ left：200px”時，它又又完美地移動了按鈕，但是當我將鼠標懸停時，它又將按鈕移動回了頁面的中心。

我如何阻止它執行此操作？

我已經創建了IMG圖像以專門顯示其運動方式： https ： //imgur.com/a/SMLCbmN

**注意左：200px; 未添加，按鈕不會移到頁面中心。 我試過刪除“ text-algin：center;” 以及許多其他想法..但被卡住了。

這是代碼： https : //codepen.io/TheGreatEscape/pen/ebYgGO

 .container { width: 100%; text-align: center; margin-top: 0vh; } .circle { stroke: #f70f4d; stroke-dasharray: 650; stroke-dashoffset: 650; -webkit-transition: all 0.5s ease-in-out; opacity: 0.3; } .playBut { position: relative; top: 400px; left: 200px; border: none; -webkit-transition: all 0.5s ease; } .playBut .triangle { -webkit-transition: all 0.7s ease-in-out; stroke-dasharray: 240; stroke-dashoffset: 480; stroke: #000; transform: translateY(0); } .playBut:hover .triangle { stroke-dashoffset: 0; opacity: 1; stroke: #f70f4d; animation: nudge 0.7s ease-in-out; } @keyframes nudge { 0% { transform: translateX(0); } 30% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 70% { transform: translateX(-2px); } 100% { transform: translateX(0); } } .playBut:hover .circle { stroke-dashoffset: 0; opacity: 1; } 

 <div class='container'> <a href='#' class='playBut'> <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="213.7px" height="213.7px" viewBox="0 0 213.7 213.7" enable-background="new 0 0 213.7 213.7" xml:space="preserve"> <polygon class='triangle' id="XMLID_18_" fill="none" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points=" 73.5,62.5 148.5,105.8 73.5,149.1 "/> <circle class='circle' id="XMLID_17_" fill="none" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="106.8" cy="106.8" r="103.3"/> </svg> </a> </div> 

Answer 1

在您的.playBut position: absolute添加position: absolute 。 top和left僅適用於絕對位置。

在這里查看示例

Answer 2

看這個演示是否有幫助

 /*===== PLAY BUTTON ===*/ .container { width: 100%; text-align: center; margin-top: 0vh; } .circle { stroke: #f70f4d; stroke-dasharray: 650; stroke-dashoffset: 650; -webkit-transition: all 0.5s ease-in-out; opacity: 0.3; } .playBut { /*position: relative; top:400px; left:200px;*/ border: none; -webkit-transition: all 0.5s ease; } .playBut .triangle { -webkit-transition: all 0.7s ease-in-out; stroke-dasharray: 240; stroke-dashoffset: 480; stroke: #000; transform: translateY(0); } .playBut:hover .triangle { stroke-dashoffset: 0; opacity: 1; stroke: #f70f4d; animation: nudge 0.7s ease-in-out; } @keyframes nudge { 0% { transform: translateX(0); } 30% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 70% { transform: translateX(-2px); } 100% { transform: translateX(0); } } .playBut:hover .circle { stroke-dashoffset: 0; opacity: 1; } h2.title { font-size: 40px; margin: 60px 0 0; display: inline-block; float: left; } 

 <div class='container'> <h2 class="title">some text</h2> <a href='#'class='playBut'> <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="213.7px" height="213.7px" viewBox="0 0 213.7 213.7" enable-background="new 0 0 213.7 213.7" xml:space="preserve"> <polygon class='triangle' id="XMLID_18_" fill="none" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points=" 73.5,62.5 148.5,105.8 73.5,149.1 "/> <circle class='circle' id="XMLID_17_" fill="none" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="106.8" cy="106.8" r="103.3"/> </svg> </a> </div> 

更新您需要的

a.playBut, a.playBut:hover, a.playBut:active, a.playBut:focus {
    left: 800px;
    right: auto;
}

觀看演示

正常

懸停時