HTML/CSS 按钮问题

Question

我最近一直在使用 HTML 为学校项目创建程序。一切都很顺利，直到现在。我放置的任何按钮或文本似乎都被障碍挡住了，但我不知道是什么。

我有一个 JSFiddle link，但对于实际程序我使用的是 Adobe Edge-Code http://jsfiddle.net/nwsuoarw/1/ 问题出在

<button id="b4">Leave</button> 和 <button id="b5">Newspaper</button>

非常感谢您。

编辑：我对这个问题的措辞非常糟糕，为此我深表歉意。我的意思是我无法将按钮放在主框内。或者正如它在代码中所知道的那样

<div class="one">

Answer 1

工作代码演示

http://jsfiddle.net/nadeemmnn2007/nwsuoarw/2/

问题是您包含在 jsfiddle 中的脚本文件有问题 html

<div class="one">
    <div class="two"></div>
    <div class="three">
        <p id="p1">Honey</p>
        <button id="b1", onclick="myFunction()">Buy</button>
        <script>
            function myFunction() {
            var area = Number(prompt("How many pounds of Honey would you like? ([=11=].39 per pound)"));
            var answer = (area * 0.39);
            confirm("$" + answer);
            } 
        </script>               
    </div>
    <div class="four">
        <p id="p2">Beeswax</p>
        <button id="b2"onclick="myFunction()">Buy</button>
        <script>
            function myFunction() {
            var area = Number(prompt("How many pounds of Beeswax would you like? ([=11=].39 per pound)"));
            var answer = (area * 0.39);
            confirm("$" + answer);
            } 
        </script>
    </div>
    <div class="five">
        <button id="b3">Tour</button> 
    </div>
    <div class="face">
        <button>Help</button>
    </div>
    <div class="six">
    </div>
    <div class="seven">
    </div> 
    <div class="eight">
        <button id="b5">Newspaper</button>
    </div>
    <button id="b4">Leave</button>
</div>
<h1 id="h1">Welcome to Maycomb Honeycomb!</h1>
<h3>This is our virtual tour v1.0! Enjoy!<h3>

Answer 2

CSS DIV 8 的问题...如果您删除 CSS 报纸点击正常。你有几个选择。

为 Div 调整 CSS 8 - 会说删除它...（如果你不能这样做）
把报纸按钮放在外面 div 8.

您提供的 fiddle 中的爱心按钮可以正常点击。

Code is below in fiddle

http://jsfiddle.net/nwsuoarw/4/

Answer 3

我猜你错过了点击事件和脚本中的函数。如果是这样，请参见下文：

<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
<script type='text/javascript' src='script.js'></script>

<div class="one">
    <div class="two"></div>
    <div class="three">
        <p id="p1">Honey</p>
        <button id="b1", onclick="myFunction();">Buy</button>
        <script>
            function myFunction() {
            var area = Number(prompt("How many pounds of Honey would you like? ([=10=].39 per pound)"));
            var answer = (area * 0.39);
            confirm("$" + answer);
            } 
function leave(){
// your code goes here;
}
function Newspaper(){
// your code goes here;
}
        </script>               
    </div>
    <div class="four">
        <p id="p2">Beeswax</p>
        <button id="b2"onclick="myFunction()">Buy</button>
        <script>
            function myFunction() {
            var area = Number(prompt("How many pounds of Beeswax would you like? ([=10=].39 per pound)"));
            var answer = (area * 0.39);
            confirm("$" + answer);
            } 
        </script>
    </div>
    <div class="five">
        <button id="b3">Tour</button> 
    </div>
    <div class="face">
        <button>Help</button>
    </div>
    <div class="six">
    </div>
    <div class="seven">
    </div> 
    <div class="eight">
        <button id="b5"onclick="Newspaper();">Newspaper</button>
    </div>
    <button id="b4" onclick="leave();">Leave</button>
</div>
<h1 id="h1">Welcome to Maycomb Honeycomb!</h1>
<h3>This is our virtual tour v1.0! Enjoy!<h3>

HTML/CSS 按钮问题

HTML/CSS Buttons issue

html

css

button