如何获得这些按钮以一条线居中显示？
[英]How do I get these buttons to show centered in a line?
问题描述
如果可能的话，我想将页面分为三部分，并让每个按钮占据整个部分，以便于单击。
我已经按照我的想法进行了设置，以显示如下所示的按钮：
Last
Next
Stop
由于某种原因，我最终得出的结论是完全错误的。 它在彼此顶部的页面底部显示“最后”和“停止”。
码：
@keyframes hue { 0% { filter: hue-rotate(0deg); -webkit-filter: hue-rotate(0deg); } 100% { filter: hue-rotate(-360deg); -webkit-filter: hue-rotate(-360deg); } } .canvas-container{ position: relative; width: 100%; height: 100%; } #freq { background: linear-gradient(#ff0088, red); position: absolute; left: 0; right: 0; margin: 0 auto; } body { background:#000; overflow: hidden; } #freq.animateHue, body.animateHue { animation-name: hue; animation-duration: 500s; animation-delay: 1s; animation-iteration-count: infinite; -webkit-animation-name: hue; -webkit-animation-duration: 500s; -webkit-animation-delay: 1s; -webkit-animation-iteration-count: infinite; } #title, #artist, #album { position: relative; text-align: center; width: 100%; z-index: 999; font-weight: 100; font-family: "Roboto", sans-serif; /*font-size: 100px;*/ color: #fff; visibility: hidden; letter-spacing: -.05em; text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); margin-bottom: 15px; } #song_info_wrapper { position: absolute; width: 100%; text-align: center; } #title { font-size: 10vw; } #artist { font-size: 3vw; } #album { font-size: 3vw; /*font-size: 40px;*/ margin-bottom: 0; } input, #loading { position: absolute; top: 45%; left: 40%; display: block; z-index: 999; } #songName { position: absolute; top: 80%; right: 19%; display: block; z-index: 999; width: 100%; font-weight: 100; font-family: "Roboto", sans-serif; /*font-size: 100px;*/ color: #fff; letter-spacing: -.05em; text-shadow: 0px 0px 10px rgba(20, 20, 20, 20); margin-bottom: 15px; font-size: 3vw; } #c1, #c2 { width: 33%; } #c3 { width: auto; } #playSampleButton { padding: 10px 25px; font-size: 13vw; height: 100%; width: 100%; color: #fff; font-family: "Roboto", sans-serif; z-index: 999; position: relative; letter-spacing: -.05em; text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); margin: auto; background-color: Transparent; background-repeat: no-repeat; border: none; cursor: pointer; overflow: hidden; outline: none; } #buttonSmall { padding: 10px 25px; font-size: 10vw; height: 100%; width: 100%; color: #fff; font-family: "Roboto", sans-serif; z-index: 999; position: absolute; letter-spacing: -.05em; text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); background-color: Transparent; background-repeat: no-repeat; border: none; cursor: pointer; overflow: hidden; outline: none; } #buttonStop { padding: 10px 25px; font-size: 10vw; height: 100%; width: 100%; color: #fff; font-family: "Roboto", sans-serif; z-index: 999; position: absolute; letter-spacing: -.05em; text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); background-color: Transparent; background-repeat: no-repeat; border: none; cursor: pointer; overflow: hidden; outline: none; } #loading { display: inline-block; top: 44px; left: 110px; font-family: "Roboto", sans-serif; font-size: 12px; } html, body { width: 100%; height: 100%; margin: 0px; } @media screen and (min-width: 1000px) { #title { font-size: 100px; } #artist, #album { font-size: 40px; } } @media screen and (max-width: 500px) { #artist, #album { font-weight: 300; font-size: 4vw; } } @media screen and (max-width: 436px) { #artist, #album { font-weight: 300; font-size: 4.5vw; } #title { } }
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta content='IE=8' http-equiv='X-UA-Compatible'> <title>Frequcency analysis using HTML5 Audio and Web Audio API</title> <meta name="viewport" content="width=device-width"> <!-- Das favicon.ico und das apple-touch-icon.png in das root Verzeichnis --> <link rel="stylesheet" href="css/style.css"> <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,700' rel='stylesheet' type='text/css' /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="src/bufferloader.js"></script> <script src="src/id3-minimized.js"></script> <script src="src/audiovisualisierung.js"></script> </head> <body> <p class="songName" id="songName"></p> <span id="loading"></span> <div id="song_info_wrapper"> </div> <div class="canvas-container"> <canvas id="freq" width="1024" height="525"></canvas> <div id="c3"> <button id="playSampleButton" type="button" onClick="playNext()">Next</button> </div> <div id="c1"> <button id="buttonSmall" type="button" onClick="playLast()">Last</button> </div> <br /> <br /> <div id="c2"> <button id="buttonStop" type="button" onClick="playStop()">Stop</button> </div> </div> </body> </html>
1 个解决方案
解决方案1
0 已采纳 2019-03-30 16:01:47
问题是您的按钮高度和它们所在的div的高度。首先，您没有给c1 / c2 / c3容器一个高度，因此将按钮高度设置为100％将不起作用-它们是未定义的100％ 。
下面，我没有完全为您解决此问题，但我确实超越了这些元素的高度，您可以看到其中的区别（您需要查看演示“ Full Page” （右上角的链接）看见...）。
#c1, #c2, #c3{height:30vh !important;} #playSampleButton, #buttonSmall, #buttonStop{height:20vh !important;} html, body{width: 100%;height:100%;margin:0px;} .canvas-container{position:relative;width:100%;height:100vh;} #freq{background:linear-gradient(#ff0088, red);position:absolute;left:0;right:0;margin:0 auto;} body{background:#000;overflow:hidden;} #freq.animateHue, body.animateHue{animation-name:hue;animation-duration:500s;animation-delay:1s;animation-iteration-count:infinite;-webkit-animation-name:hue;-webkit-animation-duration:500s;-webkit-animation-delay:1s;-webkit-animation-iteration-count:infinite;} #title, #artist, #album{position:relative;text-align:center;width:100%;z-index:999;font-weight:100;font-family:"Roboto", sans-serif;font-size:100px;color:#fff;visibility:hidden;letter-spacing:-.05em;text-shadow:0px 0px 8px rgba(0, 0, 0, 0.5);margin-bottom:15px;} #song_info_wrapper{position:absolute;width:100%;text-align:center;} #title{font-size:10vw;} #artist{font-size:3vw;} #album{font-size:3vw;font-size:40px;margin-bottom:0;} input, #loading{position:absolute;top:45%;left:40%;display:block;z-index:999;} #songName{position:absolute;top:80%;right:19%;display:block;z-index:999;width:100%;font-weight:100;font-family:"Roboto", sans-serif;font-size:100px;color:#fff;letter-spacing:-.05em;text-shadow:0px 0px 10px rgba(20, 20, 20, 20);margin-bottom:15px;font-size:3vw;} #c1, #c2{width:33%;} #c3{width:auto;} #playSampleButton{padding:10px 25px;font-size:13vw;height:100%;width:100%;color:#fff;font-family:"Roboto", sans-serif;z-index:999;position:relative;letter-spacing:-.05em;text-shadow:0px 0px 8px rgba(0, 0, 0, 0.5);margin:auto;background-color:Transparent;background-repeat:no-repeat;border:none;cursor:pointer;overflow:hidden;outline:none;} #buttonSmall{padding:10px 25px;font-size:10vw;height:100%;width:100%;color:#fff;font-family:"Roboto", sans-serif;z-index:999;position:absolute;letter-spacing:-.05em;text-shadow:0px 0px 8px rgba(0, 0, 0, 0.5);background-color:Transparent;background-repeat:no-repeat;border:none;cursor:pointer;overflow:hidden;outline:none;} #buttonStop{padding:10px 25px;font-size:10vw;height:100%;width:100%;color:#fff;font-family:"Roboto", sans-serif;z-index:999;position:absolute;letter-spacing:-.05em;text-shadow:0px 0px 8px rgba(0, 0, 0, 0.5);background-color:Transparent;background-repeat:no-repeat;border:none;cursor:pointer;overflow:hidden;outline:none;} #loading{display:inline-block;top:44px;left:110px;font-family:"Roboto", sans-serif;font-size:12px;} @keyframes hue{ 0%{filter:hue-rotate(0deg);-webkit-filter:hue-rotate(0deg);} 100%{filter:hue-rotate(-360deg);-webkit-filter:hue-rotate(-360deg);} } @media screen and (min-width:1000px){ #title{font-size:100px;} #artist, #album{font-size:40px;} } @media screen and (max-width:500px){ #artist, #album{font-weight:300;font-size:4vw;} } @media screen and (max-width:436px){ #artist, #album{font-weight:300;font-size:4.5vw;} #title{} }
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta content='IE=8' http-equiv='X-UA-Compatible'> <title>Frequcency analysis using HTML5 Audio and Web Audio API</title> <meta name="viewport" content="width=device-width"> <!-- Das favicon.ico und das apple-touch-icon.png in das root Verzeichnis --> <link rel="stylesheet" href="css/style.css"> <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,700' rel='stylesheet' type='text/css' /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="src/bufferloader.js"></script> <script src="src/id3-minimized.js"></script> <script src="src/audiovisualisierung.js"></script> </head> <body> <p class="songName" id="songName"></p> <span id="loading"></span> <div id="song_info_wrapper"> </div> <div class="canvas-container"> <canvas id="freq" width="1024" height="525"></canvas> <div id="c3"> <button id="playSampleButton" type="button" onClick="playNext()">Next</button> </div> <div id="c1"> <button id="buttonSmall" type="button" onClick="playLast()">Last</button> </div> <br /> <br /> <div id="c2"> <button id="buttonStop" type="button" onClick="playStop()">Stop</button> </div> </div> </body> </html>
我无法让导航栏按钮显示背景按钮。 我该如何解决？
[英]I can't get my navigation bar buttons to show the background buttons. How do I solve this?
我似乎无法让这两个按钮像这样排列按钮。 我怎样才能做到这一点？
[英]I can't seem to get these two buttons line up buttons like this. How can I do this?
如何使下一行中的文本居中而不向左对齐？
[英]How do I make the text in the next line to be centered and not aligned to the left?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.