无论屏幕大小如何，如何使按钮保持在右侧？
[英]How can I make a button stay to the right no matter the screen size?
问题描述
I have this button made in js it has an image on top and a link, how can i make it so no matter any screen size it stays to the right, because i tried 100% 100vw but it made it to the right to much to the point you to scroll to the right in order to see it, i tried 86 for both it worked on my screen size but made it so you to scroll to the right in order to see it.
我用 js 制作了这个按钮，它在顶部有一个图像和一个链接，我怎样才能做到无论任何屏幕尺寸它都保持在右边，因为我尝试了 100% 100vw 但它使它向右移动了很多您向右滚动以查看它的点，我尝试了 86，因为它适用于我的屏幕尺寸但它让您向右滚动以查看它。
.set { background-color: black; .invisible { display: none } } button { background-repeat: no-repeat; background-position: 50% 50%; /* put the height and width of your image here */ height: 350px; width: 250px; border: none; color: black position:relative; } button span { display: none; }.btn1 { background-image: url("https://i.ibb.co/RPZ82RK/DRAFT.jpg"); margin-left: 80vw; } #test { display: flex; } img { float: left; width: 20%; height: 300px; object-fit: cover; padding: 0px; } h1 { background: #ee6c4d; color: #fff; padding: 5px; border-radius: 50px; margin: 50px; -webkit-box-decoration-break: clone; -moz-background-inline-policy: clone; box-decoration-break: clone; }.tablink { border-radius: 500px; background-color: #1a2858; padding-top: -10px; color: white; float: center; border: none; outline: none; cursor: pointer; font-size: 30px; width: 55.6px; height: 55.6px; text-align: center; margin-top: 1.5%; color: white; font-family: yaqout; font-weight: bold; } /* Change background color of buttons on hover */.tablink:hover { background-color: #49e2f8; } /* Set default styles for tab content */.tabcontent color: white; display: none; padding: 14px; text-align: center; }.container { height: 200px; position: relative; }.center { margin: 0; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } body { font-family: sans-serif; margin: 0; }.header { padding: 1px; text-align: center; background: #489795; color: #1a2858; font-size: 70px; height: 10%; font-family: yaqout; font-weight: bold; <body style="background-image: url('https://i.ibb.co/vhvmNbQ/1234.jpg.jpg');"></body> <button onclick="myFunction()" id="score" style="color: transparent; background-color: transparent; border-color: transparent; cursor: default;position:absolute;">Click to see progress</button> <button id="complete" style="color: transparent; background-color: transparent; border-color: transparent; cursor: default;position:absolute;"></button> </header> <div class="header"> <span> خواندن مرحلهوار<span> </div> </body> <button class="tablink" id="c" onclick="location.href='https://razkudak.000webhostapp.com/index.html/ya/alif-ya.html'">ی</button> <button class="tablink" id="b" onclick="location.href='https://razkudak.000webhostapp.com/index.html/alif%20mat/alif-ya.html'">ه</button> <button class="tablink" id="a" onclick="location.href='https://razkudak.000webhostapp.com/index.html/wow/alif-ya.html'">و</button> <button class="tablink" id="29" onclick="location.href='https://razkudak.000webhostapp.com/index.html/nun/alif-ya.html'">ن</button> <button class="tablink" id="28" onclick="location.href='https://razkudak.000webhostapp.com/index.html/mem/alif-ya.html'">م</button> <button class="tablink" id="27" onclick="location.href='https://razkudak.000webhostapp.com/index.html/lam/alif-ya.html'">ل</button> <button class="tablink" id="26" onclick="location.href='https://razkudak.000webhostapp.com/index.html/gaf/alif-ya.html'">گ</button> <button class="tablink" id="25" onclick="location.href='https://razkudak.000webhostapp.com/index.html/kaf/alif-ya.html'">ک</button> <button class="tablink" id="24" onclick="location.href='https://razkudak.000webhostapp.com/index.html/gaf/alif-ya.html'">ق</button> <button class="tablink" id="23" onclick="location.href='https://razkudak.000webhostapp.com/index.html/fe/alif-ya.html'">ف</button> <button class="tablink" id="22" onclick="location.href='https://razkudak.000webhostapp.com/index.html/ghyn/alif-ya.html'">غ</button> <button class="tablink" id="21" onclick="location.href='https://razkudak.000webhostapp.com/index.html/ayn/alif-ya.html'">ع</button> <button class="tablink" id="20" onclick="location.href='https://razkudak.000webhostapp.com/index.html/zuy/alif-ya.html'">ظ</button> <button class="tablink" id="19" onclick="location.href='https://razkudak.000webhostapp.com/index.html/tuy/alif-ya.html'">ط</button> <button class="tablink" id="18" onclick="location.href='https://razkudak.000webhostapp.com/index.html/zad/alif-ya.html'">ض</button> <button class="tablink" id="17" onclick="location.href='https://razkudak.000webhostapp.com/index.html/sad/alif-ya.html'">ص</button> <button class="tablink" id="16" onclick="location.href='https://razkudak.000webhostapp.com/index.html/shen/alif-ya.html'">ش</button> <button class="tablink" id="15" onclick="location.href='https://razkudak.000webhostapp.com/index.html/sen/alif-ya.html'">س</button> <button class="tablink" id="14" onclick="location.href='https://razkudak.000webhostapp.com/index.html/ghe/alif-ya.html'">ژ</button> <button class="tablink" id="13" onclick="location.href='https://razkudak.000webhostapp.com/index.html/ze/alif-ya.html'">ز</button> <button class="tablink" id="12" onclick="location.href='https://razkudak.000webhostapp.com/index.html/re/alif-ya.html'">ر</button> <button class="tablink" id="11" onclick="location.href='https://razkudak.000webhostapp.com/index.html/zal/alif-ya.html'">ذ</button> <button class="tablink" id="10" onclick="location.href='https://razkudak.000webhostapp.com/index.html/dal/alif-ya.html'">د</button> <button class="tablink" id="9" onclick="location.href='https://razkudak.000webhostapp.com/index.html/khe/alif-ya.html'">خ</button> <button class="tablink" id="8" onclick="location.href='https://razkudak.000webhostapp.com/index.html/he/alif-ya.html'">ح</button> <button class="tablink" id="7" onclick="location.href='https://razkudak.000webhostapp.com/index.html/che/alif-ya.html'">چ</button> <button class="tablink" id="6" onclick="location.href='https://razkudak.000webhostapp.com/index.html/gym/alif-ya.html'">ج</button> <button class="tablink" id="5" onclick="location.href='https://razkudak.000webhostapp.com/index.html/the/alif-ya.html'">ث</button> <button class="tablink" id="4" onclick="location.href='https://razkudak.000webhostapp.com/index.html/te/alif-ya.html'">ت</button> <button class="tablink" id="3" onclick="location.href='https://razkudak.000webhostapp.com/index.html/pe/alif-ya.html'">پ</button> <button class="tablink" id="2" onclick="location.href='https://razkudak.000webhostapp.com/index.html/be/alif-ya.html'">ب</button> <button class="tablink" id="1" onclick="location.href='https://razkudak.000webhostapp.com/index.html/alif/alif-ya.html'">ا</button> </head> <body> <div id="test"></div> </body> </html>
Also the CSS to change the buttons things are on top of the CSS.还有 CSS 用于更改按钮的东西位于 CSS 之上。
https://codepen.io/haroon1233212/pen/NWXQXRa https://codepen.io/haroon1233212/pen/NWXQXRa
1 个解决方案
解决方案1
2 2022-04-27 21:22:39
Well, for keeping a button always in the same spot, absolute positioning should get the job done.好吧，为了让按钮始终位于同一位置，绝对定位应该可以完成工作。
button { position: absolute; right: 0; }
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
无论屏幕的高度/宽度如何，如何使图像停留在屏幕底部？ - How do I make an image stay at the bottom of the screen no matter the screen height/width?
无论访问者滚动的页面有多低，如何使DIV停留在屏幕顶部？ - How do I make a DIV stay at the top of the screen no matter ow far down the page my visitor scrolls?
如何使按钮停留在屏幕底部？ - How to make a button stay at a bottom of a screen?
我正在尝试制作响应式文本，但无论屏幕有多大，它的大小都是固定的 - I am trying to make a responsive text, but it's size is fixed no matter how big the screen is
CSS样式，如何使此按钮停留在右侧并保持响应 - CSS styling, how to make this button stay on the right side and be responsive
如何在添加内容的情况下使div保持相同大小？ - How can I make my divs stay the same size depite adding content?
无论您使用什么设备或屏幕尺寸，如何使 svg 高度与屏幕高度匹配 - how to make svg height match the screen height no matter what device or screen size you are using
如何根据屏幕尺寸为元素设置动态宽度？ - How can I make a dynamic width for elements based on the screen size?
如果输入正确的信息，如何使按钮点亮？ - How can I make a button light up if the right information is entered?
当左div向下滑动时，右div被推到其下方。 如何使他们留在正确的地方？ - When the left div slides down, the right div is pushed below it. How can I make them stay in the correct place?
相关标签