html - CSS 仅模拟一个选择框

标签 html css internet-explorer-7

我需要你的帮助。

当第一次加载页面时,我的容器的宽度似乎没有被强制。我在屏幕上看到的唯一内容是: enter image description here ,容器的宽度应该是强制的,因此它应该是这样的:enter image description here

我该如何解决这个问题?

<!DOCTYPE html>

<html>

<head>

<style type="text/css">
#container {
    width: 200px;
    float: left;
    border: 1px solid green;
}
#one {
    height: 200px;
    border: 1px solid red;
    display: none
}
#two {
    width: 8px;
    height: 8px;
    border: 1px solid blue;
}
#menu {
    padding: 3px;
    margin: 0;
    cursor: default;
    width: 200px;
}
</style>

<script type="text/javascript">
 function showMenu(){
   document.getElementById("one").style.display="block";
 }
 function hideMenu(){
   document.getElementById("one").style.display="none";
 }
</script>

</head>

<body>

<div id="container">
    <div id="one" onclick="hideMenu()">
        <ul id="menu">
          <li>Item 1</li>
          <li>Item 2</li>
        </ul>
    </div>
</div>

<div id="two"><img src="images/arrow_double.png" onclick="showMenu()"></div>
</body>

</html>

最佳答案

您忘记将 float: left; CSS 属性添加到 #two

此处:http://jsfiddle.net/wuW82/

关于html - CSS 仅模拟一个选择框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20124221/

相关文章:

javascript - 如何在 Ionic 中使用无限滚动时加载更多旋转器?

html - 垂直对齐绝对定位元素与 flexbox

css - 为什么div的位置会根据内容变化?

html - CSS 类样式问题

css - 如何在样式表中包含 url 中的字体系列

asp.net - 以编程方式在ie7中打开一个新选项卡

css - 箭头弹跳到CSS中的右下角

jquery - 在滚动 : move up content div 上

css - 标签在IE7中显示错误,float :left doesn't work as expected

javascript - Javascript 下载按钮的最佳实践实现是什么?