Question

在我的HTML页面中，我没有看到我的按钮......请帮帮我......

#container
{
    position:relative;
    width:700px;
    height:400px;
    border: 2px solid black;
        background-color:#888;
    margin: 50px auto 0px;
    overflow:hidden;
}
.box
{
    position:relative;
    width:600px;
    height:300px;
    border: 1px solid black;
    margin: 50px auto 0px;
    overflow:hidden;
}
#button
{
    margin:47%;
    position:absolute;
    margin-top:2%;
}

JAVASCRIPT：

<script type="text/javascript">
    var $c =0;
    function next()
    {
        var boxes = document.getElementsByClassName("box");
        $c +=1;
        if($c >= boxes.length) $c = 0;
        for (var $i=0;$i<boxes.length;$i++)
        {
            boxes[$i].style.display  = "none";
        }
    boxes[$c].style.display  = "block";
    return false;
    }
    function prev()
    {
        var boxes = document.getElementsByClassName("box");
        $c -=1;
        if($c < 0) $c = (boxes.length-1);   
        for (var $i=0;$i<boxes.length;$i++)
        {
            boxes[$i].style.display  = "none";
        }
    boxes[$c].style.display  = "block";
    return false;   
    }
</script>

HTML：

<div id="container">
    <div class="box"><img src="img1.jpg"/></div>
    <div class="box"><img src="img2.jpg"/></div>
    <div class="box"><img src="img3.jpg"/></div>
<div id= button>
    <button id="bwd" onclick="return prev()"><<</button>
    <button id="fwd" onclick="return next()">>></button>
</div>

</div>

Answer 1

可能是因为您在按钮内使用了<和>，因此浏览器会解释您的HTML错误。

对>和> <进行<尝试，它应该正常运行。（这些被称为HTML entities。）

另一个原因可能是您的边距正在移动另一个元素下的按钮。尝试根本不设置按钮样式（删除CSS）并查看它的位置。

Answer 2

除非你想要开始标记，否则不要在你的html代码中写<。

替换

<div id= button>
    <button id="bwd" onclick="return prev()"><<</button>
    <button id="fwd" onclick="return next()">>></button>
</div>

与

<div id= button>
    <button id="bwd" onclick="return prev()">&lt;&lt;</button>
    <button id="fwd" onclick="return next()">&gt;&gt;</button>
</div>

Answer 3

试试这个

.box {
    border: 1px solid black;
    float: left;
    height: 300px;
    margin: 50px 45px;
    overflow: hidden;
    position: relative;
    width: 600px;
}

我的页面中没有看到我的按钮

3 个答案: