如何正確地網格/定位這些按鈕 - 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.