如何正确地网格/定位这些按钮 - CSS
[英]How to grid/position these buttons correctly - CSS
问题描述
我很难过。 我需要一些专业的建议。
首先，第二个菜单，我想我应该使用填充将它放在正确的位置？ 其次，即使我看到导航条在视觉上相似，当我添加图像时，它们的分辨率很低，并且在激活时它也会停止变为蓝色。 此外，我很确定将箭头添加为临时隐藏的即兴形状是错误的，因为我希望整个事物能够在移动设备上做出响应。 这不是响应。 事实上，如果我调整按钮的大小，左上角的徽标会变小。 我只需要在正确的方向上轻推一下，因为我一直在做这个据说容易做2-3天的页面。 我应该重新开始吗？
.html{ height: auto; } .uk-container { display: flex; margin: 0 0 0 0; padding: 0 0 0 0; height:auto; } .box-1 { width:100%; height:auto; margin: 0; padding: 0; } #card{ margin: 0; padding: 0; height: 100%; width: auto; display:block; } .box-2 { display: inline-block; } .uk-card-media-top { padding: 70px 50px 70px 50px; margin: 0; } /*********************************************************************/ /***************************List Properties**************************/ ul { position: relative;; padding: 0; } ul li { background-repeat: none; background-position-x:200px; border:0; line-height: 15px; margin:0%; padding: 9px; text-align: left; position: relative; width:100%; height:100%; list-style: none; margin-bottom: 5px; background-color: #eeeeee; } ul li.active:after { content: ""; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid #0092ff; position:absolute; top: 20%; right:-15px; } ul li a { display:block; padding:10px 10px 10px 20px; text-decoration: uppercase; color:#555353; font-weight: bold; overflow: hidden; } ul li.active a { background:#0092ff ; color:white ; } ul li.active:hover a{ color:white; } ul li:hover a{ text-decoration: none; color: rgb(149, 147, 147); } /*****************************************************/ /*******************Buttons***************************/ .contactdiv { display: flex; position: center; justify-content: center; } #contact{ background-color: #555353; color: #eeeeee; border-radius: 4px; margin: 4%; } .button { border: none; color: white; padding: 100px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 5px; } .buttn{ border:0; padding: 75px; /* this is how wide the image is plus any additional padding*/ border-radius: 5px; cursor: pointer; }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/css/uikit.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit-icons.min.js"></script> <script src="js.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <title>Gerege EasyPay</title> </head> <body> <div class= "uk-container"> <div id="card" class="uk-card uk-card-horizontal uk-card-default uk-card-body"> <div class="uk-card-media-top"> <img src="1/gerege.png" alt="Something Went Wrong..."> </div> <div class="box-1"> </div> <div class="uk-width-auto"> <!--270 px height 170 px width--> <ul> <!--starting to understand why bootstrap,uikit was made--> <li class="active"><a href="#">НИЙТЛЭГ ҮЙЛЧИЛГЭЭ<br><span style="font-size:15px;">Торгууль, татвар, СӨХ...</span></a></li> <li><a href="#" style= "background:url(1/menu/old_con/car.png) left no-repeat; background-size: 20% 50%">АВТО ТЭЭВЭР<br><span style="font-size:15px;">Торгууль, татвар...</span></a></li> <li><a href="#" style= "background:url(1/menu/old_con/travel.png) left no-repeat; background-size: 20% 50%">АЯЛАЛ ЗУГААЛГА<br><span style="font-size:15px;">Хот хоорондын тээвэр, галт тэрэг...</span></a></li> <li><a href="#" style= "background:url(1/menu/old_con/goverment.png) left no-repeat; background-size: 20% 50%">ТӨРИЙН ҮЙЛЧИЛГЭЭ<br><span style="font-size:15px;">Лавлагаа, тодорхойлолт...</span></a></li> <li><a href="#" style= "background:url(1/menu/old_con/apartment.png) left no-repeat; background-size: 20% 50%">ОРОН СУУЦ<br><span style="font-size:15px;">Цахилгаан, дулаан, СӨХ...</span></a></li> <li><a href="#" style= "background:url(1/menu/old_con/ticket.png) left no-repeat; background-size: 20% 50%">ҮЗВЭР ҮЙЛЧИЛГЭЭ<br><span style="font-size:15px;">Ticket.mn, Playtime...</span></a></li> <li><a href="#" style= "background:url(1/menu/old_con/contact.png) left no-repeat; background-size: 20% 50%">ГАР УТАС<br><span style="font-size:15px;">Skytel,Unitel,G-Mobile...</span></a></li> <li><a href="#" style= "background:url(1/menu/old_con/other.png) left no-repeat; background-size: 20% 50%">БУСАД<br><span style="font-size:15px;">Skymedia, Univision...</span></a></li> <li><a href="#" style= "background:url(1/menu/old_con/contract.png) left no-repeat; background-size: 20% 50%">ХАМТРАН АЖИЛЛАХ<br><span style="font-size:15px;">Бид таны итгэлт түнш</span></a></li> </ul> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript"> $(document).on('click','ul li', function(){ $(this).addClass('active').siblings().removeClass('active') $(this).addClass('active') }) </script> <div class="contactdiv"> <!-- This is a button toggling the modal with the default close button --> <button id="contact" class="uk-button uk-button-default uk-margin-small-right" type="button" uk-toggle="target: #modal-close-default">ХОЛБОО БАРИХ</button> <!-- This is the modal with the default close button --> <div id="modal-close-default" uk-modal> <div class="uk-modal-dialog uk-modal-body"> <button class="uk-modal-close-default" type="button" uk-close></button> <h2 class="uk-modal-title">WHA</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </div> </div> </div> <div class="box-2"> <button style="background:url(1/bus.png) no-repeat left;"class="buttn"><a href="#"></a> </button> <button style="background:url(1/bus.png) no-repeat left;"class="buttn"><a href="#"></a> </button> <button style="background:url(1/bus.png) no-repeat left;"class="buttn"><a href="#"></a> </button> <button style="background:url(1/bus.png) no-repeat left;"class="buttn"><a href="#"></a> </button> <button style="background:url(1/bus.png) no-repeat left;"class="buttn"><a href="#"></a> </button> </div> </div> </div> </div> </body> </body> </html>
假设看起来像这样： https ： //i.ibb.co/FzCNMjz/kiosk-home.jpg看起来像这样： https ： //i.ibb.co/BTPRnR1/Fire-Shot-Capture-001-Gerege-Easy -付费- 127-0-0-1.png
原本应该在星期三变成这个（以及另外两件事），这已经过去了，我刚刚坚持了4天。
1 个解决方案
解决方案1
0 2019-04-17 07:12:28
.html{ height: auto; } .uk-container { display: flex; margin: 0 0 0 0; padding: 0 0 0 0; height:auto; } .box-1 { width:100%; height:auto; margin: 0; padding: 0; } #card{ margin: 0; padding: 0; height: 100%; width: auto; display:block; } .box-2 { display: inline-block; } .uk-card-media-top { padding: 70px 50px 70px 50px; margin: 0; } /*********************************************************************/ /***************************List Properties**************************/ ul { position: relative;; padding: 0; } ul li { background-repeat: none; background-position-x:200px; border:0; line-height: 15px; margin:0%; padding: 9px; text-align: left; position: relative; height:100%; list-style: none; margin-bottom: 5px; background-color: #eeeeee; } ul li.active:after { content: ""; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid #0092ff; position:absolute; top: 20%; right:-15px; } ul li a { display:block; padding:10px 10px 10px 20px; text-decoration: uppercase; color:#555353; font-weight: bold; overflow: hidden; } ul li.active a { background:#0092ff ; color:white ; } ul li.active:hover a{ color:white; } ul li:hover a{ text-decoration: none; color: rgb(149, 147, 147); } /*****************************************************/ /*******************Buttons***************************/ .contactdiv { display: flex; position: center; justify-content: center; } #contact{ background-color: #555353; color: #eeeeee; border-radius: 4px; margin: 4%; } .button { border: none; color: white; padding: 100px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 5px; } .buttn{ border:0; padding: 75px; /* this is how wide the image is plus any additional padding*/ border-radius: 5px; cursor: pointer; }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/css/uikit.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit-icons.min.js"></script> <script src="js.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <title>Gerege EasyPay</title> </head> <body> <div class= "uk-container"> <div id="card" class="uk-card uk-card-horizontal uk-card-default uk-card-body"> <div class="uk-card-media-top"> <img src="1/gerege.png" alt="Something Went Wrong..."> </div> <div class="box-1"> </div> <div class="uk-width-auto"> <!--270 px height 170 px width--> <ul> <!--starting to understand why bootstrap,uikit was made--> <li class="active"><a href="#">НИЙТЛЭГ ҮЙЛЧИЛГЭЭ<br><span style="font-size:15px;">Торгууль, татвар, СӨХ...</span></a></li> <li><a href="#" style= "background:url(1/menu/old_con/car.png) left no-repeat; background-size: 20% 50%">АВТО ТЭЭВЭР<br><span style="font-size:15px;">Торгууль, татвар...</span></a></li> <li><a href="#" style= "background:url(1/menu/old_con/travel.png) left no-repeat; background-size: 20% 50%">АЯЛАЛ ЗУГААЛГА<br><span style="font-size:15px;">Хот хоорондын тээвэр, галт тэрэг...</span></a></li> <li><a href="#" style= "background:url(1/menu/old_con/goverment.png) left no-repeat; background-size: 20% 50%">ТӨРИЙН ҮЙЛЧИЛГЭЭ<br><span style="font-size:15px;">Лавлагаа, тодорхойлолт...</span></a></li> <li><a href="#" style= "background:url(1/menu/old_con/apartment.png) left no-repeat; background-size: 20% 50%">ОРОН СУУЦ<br><span style="font-size:15px;">Цахилгаан, дулаан, СӨХ...</span></a></li> <li><a href="#" style= "background:url(1/menu/old_con/ticket.png) left no-repeat; background-size: 20% 50%">ҮЗВЭР ҮЙЛЧИЛГЭЭ<br><span style="font-size:15px;">Ticket.mn, Playtime...</span></a></li> <li><a href="#" style= "background:url(1/menu/old_con/contact.png) left no-repeat; background-size: 20% 50%">ГАР УТАС<br><span style="font-size:15px;">Skytel,Unitel,G-Mobile...</span></a></li> <li><a href="#" style= "background:url(1/menu/old_con/other.png) left no-repeat; background-size: 20% 50%">БУСАД<br><span style="font-size:15px;">Skymedia, Univision...</span></a></li> <li><a href="#" style= "background:url(1/menu/old_con/contract.png) left no-repeat; background-size: 20% 50%">ХАМТРАН АЖИЛЛАХ<br><span style="font-size:15px;">Бид таны итгэлт түнш</span></a></li> </ul> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript"> $(document).on('click','ul li', function(){ $(this).addClass('active').siblings().removeClass('active') $(this).addClass('active') }) </script> <div class="contactdiv"> <!-- This is a button toggling the modal with the default close button --> <button id="contact" class="uk-button uk-button-default uk-margin-small-right" type="button" uk-toggle="target: #modal-close-default">ХОЛБОО БАРИХ</button> <!-- This is the modal with the default close button --> <div id="modal-close-default" uk-modal> <div class="uk-modal-dialog uk-modal-body"> <button class="uk-modal-close-default" type="button" uk-close></button> <h2 class="uk-modal-title">WHA</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </div> </div> </div> <div class="box-2"> <button style="background:url(1/bus.png) no-repeat left;"class="buttn"><a href="#"></a> </button> <button style="background:url(1/bus.png) no-repeat left;"class="buttn"><a href="#"></a> </button> <button style="background:url(1/bus.png) no-repeat left;"class="buttn"><a href="#"></a> </button> <button style="background:url(1/bus.png) no-repeat left;"class="buttn"><a href="#"></a> </button> <button style="background:url(1/bus.png) no-repeat left;"class="buttn"><a href="#"></a> </button> </div> </div> </div> </div> </body> </body> </html>
如何在 flexbox 轮播中间正确设置 position 上一个和下一个按钮？
[英]How to correctly position prev and next buttons at the middle of flexbox carousel?
使用OpenLayers和CSS网格布局时如何正确设置对齐方式
[英]How to correctly set alignments when using OpenLayers and CSS grid layout
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.