Question

在我的测试页面中，我正在使用Screenfly来检查分辨率，这似乎是我的社交登录＆＃34;和我的省选择器＆＃34;滚动，尽管有overflow: hidden和position: relative。对于loginText类（社交媒体），它是从我无法访问的其他文档中调用的。

我的测试页面：Screenfly Test

HTML：

<div class="hideFrench"><a href="frenchURL">Français</a></div>
   <div class="styled-select">
       <select id="provinceSelect">
     <option>Please select a province</option>
     <option value="alberta">Alberta</option>
     <option value="bc">British Columbia</option>
     <option value="Manitoba">Manitoba</option>
     <option value="NB">New Brunswick</option>
     <option value="NF">Newfoundland and Labrador</option>
     <option value="Ns">Nova Scotia</option>
     <option value="Nunavut">Nunavut</option>
         <option value="ON" selected="selected">Ontario</option>
     <option value="PEI">Prince Edward Island</option>
     <option value="Quebec">Quebec</option>
     <option value="Saskatchewan">Saskatchewan</option>
       </select>
  </div>



      <div class="loginText" >
       <a class="janrainEngage loginHref" href="#">Or login with 
        <span class="janrain-provider-icon-16 janrain-provider-icon-facebook"></span>
        <span class="janrain-provider-icon-16 janrain-provider-icon-linkedin"></span>
        <span class="janrain-provider-icon-16 janrain-provider-icon-twitter"></span>
       </a>
      </div>

CSS：

.loginText{
    position: relative !important;
    left: 600px;
    top: -125px;
    overflow: hidden;

}



.styled-select {
    width: 185px;
    position: relative;
    left: 933px;
    top: 40px;
    background: rgba(0, 0, 0, 0) url("http://convio.cancer.ca/mResponsive/images/icons/dropdown_blue_icon.png") no-repeat scroll right center;
    border: 1px solid #e9e9e9;
    overflow: hidden;

}

.styled-select select {
   background: transparent;
   width: 268px;
   padding: 5px;
   font-size: 13px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;

   }


.hideFrench {
    position: relative;
    top: 70px;
    left: 875px;
    border: 2px
}


@media screen and (max-width: 768px){
    .styled-select, .hideFrench{
      display: none;
      text-indent: 100%;
      white-space: nowrap;
      overflow: hidden;
 }

}

它最初在最近几天工作得很好，但从那以后我做了很多改变，现在我不知道是什么导致它保持固定以及那个大的白色差距来自登录和省选择器之间。

非常感谢任何帮助，谢谢您的时间！

Answer 1

.loginText {
    position: absolute;
    top: 60px;
    right: 18px;
    overflow: hidden;
}

`位置：亲戚`被忽略了？

1 个答案: