2017-11-07 39 views
0

div id = "box"内にボタンを置くとボタンが小さな四角いボックスとして表示されますが、div id = "box"の外に置くと正しく表示されますその中に含まれる適切なテキスト。HTMLボタンの機能が正しく機能しない

このリンクで見てみてください:あなたのCSSファイルで

<style>#box { 
 
    border: yellow 5px solid; 
 
    background-color: black; 
 
    padding: 10px; 
 
    width: 300px; 
 
} 
 

 
#box img { 
 
    width: 
 
} 
 

 
#box button { 
 
    /* adjust the button width to fit nicely */ 
 
    width: 10px; 
 
    ; 
 
    height: 4px; 
 
    padding: 2px; 
 
} 
 

 
</style>
<script src="task1.js" type="text/javascript"></script> 
 

 
<body> 
 
    <h1> Owais Ughratdar </h1> 
 
    <div id="box"> 
 
    <img id="light" src="light_0.jpg"> 
 
    <div> 
 
     <button> ON </button> 
 
    </div> 
 
    </div> 
 
</body>

+0

リモートサイトだけでなく、ここにコードを掲載してください。 [Stack Snippets](https://stackoverflow.blog/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/)を使用して実行可能にすることができます。 – Barmar

+2

あなたのボタンを4pxの高さと10pxの幅にすると、小さなボックスのように見えるのは混乱しますか? –

+0

ボックスの外にある場合、 '#box button' CSSはそれには適用されません。 – Barmar

答えて

0

#box buttonを試してみてください... widthheightそうのようなはるかに大きいを行う必要があります。

#box button { 
     /* adjust the button width to fit nicely */ 
     width: 300px;; 
     height: 200px; 
    padding: 2px; 
    } 

https://jsfiddle.net/noLqau4x/

+1

あなたのお手伝いをしてくれてありがとう、助けてくれた皆さん、ありがとう! –

関連する問題