2016-07-02 8 views
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; 
} 

任意の助けいただければ幸いです。ありがとう。

答えて

0
#btn-panel { 
width:100%; /*or pixels, whichever one you chose*/ 
height:100px; 
margin-top:50px; 
} 

です。

1

ここにあなたの問題は、あなたが100%に書いていない

#btn-panel { 
    width: 1000%; /* <- Should be 100, not 1000 */ 
    height: 100px; 
    margin-top: 50px; 
} 
関連する問題