0
これらのボタンがあります。しかし、彼らはページに表示したくありません。私は、ボタンの可視性と矛盾するCSSを持っていません。申し訳ありませんが、これは私のCSS上で少し錆びた質問です。ボタンがページに表示されないHTML5
HTML:
<!doctype html>
<html>
<head>
<title>Hello, World!</title>
<!--references-->
<link rel="stylesheet" type="text/css" href="styles/index.css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id = "box">
<h1 id="head">hello, world!</h1>
<div id = "btn-panel">
<button class="btn" id="btn1">panel1</button>
<button class="btn" id="btn2">panel2</button>
<button class="btn" id="btn3">panel3</button>
<button class="btn" id="btn4">panel4</button>
</div><!--button-panel-->
</div> <!--Box-->
</div> <!--wrapper-->
</body>
<script src="js/Index.js" type="text/javaScript"></script>
</html>
CSS:
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
#wrapper {
width: 100%;
height: 100%;
}
#box {
background-color: #EEE;
Width: 100%;
Height: 250px;
margin-left: auto;
margin-right: auto;
Text-align: center;
}
#head {
padding-top: 25px;
font-size: 20pt;
}
#btn-panel {
width: 1000%;
height: 100px;
margin-top: 50px;
}
.btn {
width: 100px;
height: 25px;
border-radius: 5px;
}
任意の助けいただければ幸いです。ありがとう。