logo标签列表

当在浏览器中进行缩放时，DIV会移动

htmlcss
4
我有一个以下的div结构。
 <div id="wrapper">
     <div id="header">
          <div id="storeFinder">
                        /*  html goes here */
          </div>
     </div> 
 </div>

现在当我在浏览器中缩放时，"storeFinder" 会向右 / 左移动...

我在网上搜索并发现需要在 "storeFinder" 周围添加一个包装器，这样它就不会随着 <body> 移动，同时指定 min-width 也可以解决问题。

在我的情况下，我已经有了一个 wrapper div，指定 min-width 也没有帮助我。

非常需要在这里寻求帮助。

 #wrapper {
            background: white;
            background-position: 50% 0px;
            width: 984px;
            margin: 0px auto 0 auto;
            text-align: center;
        }

    #header {
        width: 960px;
        height: 60px;
        margin: 0 5px 2px 5px;
        text-align: left;
        background: white;
        display: block;
        position: relative;
     }

   #storefinderdropdown {
        position: absolute;
        top: 8px;
        float: none;
        width: 270px;
        height: 43px;
        border: 5px solid #F1F1EF;
        background: #F1F1EF;
        z-index: 10;
        margin: 20px 0 0 342px;
        font-size: 10px;
        font-weight: bold;
        text-indent: 3px;
        padding: 0;
   }
非常感谢大家提供的所有答案和帮助，给你们点个赞！ - patel.milanb
请选择正确的答案。 - xan
3个回答
3
1

试试这个：

#storefinderdropdown {
        position: absolute;
        top: 8px;
    left: 342px; /*Add This*/
        float: none;
        width: 270px;
        height: 43px;
        border: 5px solid #F1F1EF;
        background: #F1F1EF;
        z-index: 10;
        margin: 20px 0 0 0; /* Change This*/
        font-size: 10px;
        font-weight: bold;
        text-indent: 3px;
        padding: 0;
   }​

也许这对您有所帮助。

1

您的正确CSS代码在这里查看工作Jsfiddle

#wrapper {
            background: white;
            background-position: 50% 0px;
            width: 984px;
            margin: 0px auto 0 auto;
            text-align: center;
        }

    #header {
        width: 960px;
        height: 60px;
        margin: 0 5px 2px 5px;
        text-align: left;
        background: white;
        display: block;
        position: relative;
     }

   #storeFinder {
        position: absolute;
        top: 8px;
        float: none;
        width: 270px;
        height: 43px;
        border: 5px solid #F1F1EF;
        background: #F1F1EF;
        z-index: 10;
        margin: 20px 0 0 0px;
        left:342px;
        font-size: 10px;
        font-weight: bold;
        text-indent: 3px;
        padding: 0;
   }
@patel.milanb：请勾选被证明最接近答案的那个。:) - xan
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接