2015-02-07 49 views
-2

Website where the issue exists 當您登錄信息(用戶名:男/密碼:男),你會看到在右側邊欄。我嘗試了一切,但我無法將按鈕列放在右側。如果你檢查元素,你可以看到我設置了margin-left和margin-right來自動調整,但它不起作用。 我怎麼能在類「選項」中居中「classWrapper」類?另外我怎麼會讓窗口類「選項」的高度?我現在有100%,但是當我測試它時,它的高度或者太長或者太短,取決於查看站點的屏幕大小。我怎麼能集中div裏面的div?汽車的利潤不工作

注:它看起來有點好於Chrome,但在Firefox和Safari瀏覽器,它看起來非常糟糕,我不知道爲什麼。任何幫助真的會很感激!

HTML設置:

 <div class='options'> 
      <div class='optionsWrapper'> 
       <div class='toggleButton' id='white'> 
       </div> 

       <div class='toggleButton' id='yellow'> 
       </div> 

       <div class='toggleButton' id='green'> 
       </div> 

       <div class='toggleButton' id='red'> 
       </div> 

       <div class='toggleButton' id='blue'> 
       <a href="https://www.google.com/"><img class='settings_icon' src="Icons/Set 1/PNG/7.png"></a> 
       </div> 
      </div> 
     </div> 

CSS設置:

.options{ 
    float: right; 
    width: 100px; 
    height: 100%; 
    background: #444444 url("http://nickbrombal.com/images/bg_pixel-grey.jpg") repeat fixed; 
    padding-top: 1.2%; 
} 

.optionsWrapper { 
margin-left:auto; 
margin-right:auto; 
top: 50%; 
position: absolute; 
transform: translate(25%, -50%); 
} 

.toggleButton{ 
    width: 100%; 
    height: 66px; 
    margin-bottom: 30px; 
    -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; 
    cursor: pointer; 
} 
+0

請分享問題相關的代碼,而不僅僅是一個鏈接到你正在使用的頁面。 – JRulle 2015-02-07 01:16:51

回答

0

我只看到一個綠色按鈕的一半。 (測試在Firefox。)

.options規則刪除height風格,然後從.optionsWrapper規則中刪除的positiontoptransform風格。現在按鈕至少顯示出來。

的原因,汽車的利潤似乎並沒有工作是,按鈕佔用母公司的整個寬度,因此,儘管利潤率實際工作中,分兩個等份劃分了零仍爲零。如果您爲按鈕指定寬度,例如width: 65px,您會看到它們居中。

+0

您的回覆在解決我理解汽車邊際效應不起作用的主要問題方面一直很棒!對此感激不盡!然而,爲什麼網站的特定部分在瀏覽器中看起來如此不同呢? – user3026860 2015-02-07 01:52:57

+0

@ user3026860:我認爲,其原因是,你使用的是一些風格,是矛盾的(定位相同的元素的幾種不同的方法)。瀏覽器在遵循這些標準方面相當不錯,但標準並未指定如何解釋無效的CSS,所以這就是瀏覽器差異最大的地方。 – Guffa 2015-02-07 02:44:22