0

我一直在疯狂地搜索我的问题，但似乎无法解决问题。

我创建了一个 iFrame，它可以通过左右方向按钮滚动 8 个图像。当我持有图像时，右箭头 (#leaf2) 消失text-align: center;。DIV

这是我的HTML，

<html>
<body>

<div id="leaf1"><button onClick="image_onclick('prev');"><img src="images/leaf.gif/></button</div>
<div id="image_box"></div>
<div id="leaf2"><button onClick="image_onclick('next');"><img src="images/leaf2.gif"/></button></div>

</body>
</html>

这是我的CSS，

body, p, image{
    margin: 0;
    padding: 0;
}

button{
    background-color: #ffffff;
    border: 0;
}

#image_box{
    text-align: center;
}

#image_box img{
    border: 1px solid black;
}

#leaf1{
    position: absolute;
    margin: 155px 0 0 8px;
}

#leaf2{
    position: absolute;
    margin: 160px 0 0 850px;
}
4

2 回答 2

1

我不确定这是否是复制错误，但您使用的是 </button</div> 而不是
</button></div>

此外，如果您尝试在 image_box 中居中图像，则需要将左右边距设置为自动。所以：

            image_box img{
                margin: 0 auto; /* or margin-left:auto; margin-right:auto; */
                border: 1px solid black;
            }
于 2011-07-12T20:25:57.567 回答
0

这里有几个语法问题：

<img src="images/leaf.gif/></button</div>

关闭src属性和<button>元素时，页面呈现方式是否不同？

<img src="images/leaf.gif"/></button></div>

另请注意，根据您发布的代码，您正在申请text-align: center一个空的 div。

于 2011-07-12T20:33:16.440 回答