比預期的尺寸更大的按鈕

Question

我目前正在做一個響應式網站，我遇到了一個我認爲很容易修復但卻不能真正修復的錯誤。 在我的網站有一個菜單，它是垂直向左推。當我加載網站時，菜單被隱藏（顯然，在頁面的左側），只有一個按鈕顯示，這是一個圖像。當我點擊按鈕時，菜單滑動到網站。這是做它的目的，但問題是，圖像（按鈕）不像按鈕一樣工作，因爲按鈕左側有一個不可見的「欄」，一直到頁面的右側，並且如果我點擊該欄，它就像按鈕一樣，它會打開菜單。

HTML：

<div class="menu"> 

    <!--Ícone do menu--> 
    <div class="icon-close"> 
     <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png"> 
    </div> 

    <!-- itens do menu --> 
    <ul> 
     <li><a class="tooltip" href="http://jeknowledge.pt/">Sobre nós</a></li> 
     <li><a href="http://jeknowledge.pt/servicos/">Serviços</a></li> 
     <li><a href="http://jeknowledge.pt/recrutamento/">Recrutamento</a></li> 
     <li><a href="http://jeknowledge.pt/parceiros/">Parceiros</a></li> 
     <li><a href="http://jeknowledge.pt/academy/">Academy</a></li> 
     <li><a href="http://jeknowledge.pt/blog/">Blog</a></li> 
     <li><a href="http://jeknowledge.pt/contactos/">Contactos</a></li> 
     <li><a href="https://www.facebook.com/jeknowledge?fref=ts">Facebook</a></li> 


    </ul> 
</div> 

<!-- Main body --> 
<div class="estilo"> 

    <div class="icon-menu"> 
     <i class="fa fa-bars"></i> 
     <img class="logo" alt="" src="C:\Users\Pedro\Desktop\projeto jeKnowledge\logo_sobre.png"> 
    </div> 

CSS：

.menu { 
    background: #202024 url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/black-thread.png') repeat left top; 
    left: -285px; 
    height: 100%; 
    position: fixed; 
    width: 285px; 
} 

/* estilos */ 



.menu ul { 
    border-top: 1px solid #636366; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

.menu li { 
    border-bottom: 1px solid #636366; 
    font-family: 'Open Sans', sans-serif; 
    line-height: 45px; 
    padding-bottom: 3px; 
    padding-left: 20px; 
    padding-top: 3px; 
} 

.menu a { 
    color: #fff; 
    font-size: 15px; 
    text-decoration: none; 
    text-transform: uppercase; 
} 

.icon-close { 
    cursor: pointer; 
    padding-left: 10px; 
    padding-top: 10px; 
} 

.icon-menu { 
    color: #fff; 
    cursor: pointer; 
    font-family: 'Open Sans', sans-serif; 
    font-size: 16px; 
    padding-bottom: 25px; 
    padding-left: 50px; 
    padding-top: 25px; 
    text-decoration: none; 
    text-transform: uppercase; 
} 

.icon-menu i { 
    margin-right: 5px; 
} 

.logo{ 
    width: 100px; 
    height:100px; 
    /* I THINK THE PROBLEM IS HERE!!!!!! */ 
} 

//波濤DO的菜單！

$('.icon-menu').click(function(){ 
     $('.menu').animate(
      {left: '0px'}, 
      200); 

     $('body').animate(
     {left: '285px'}, 
     200); 
    }); 

    $('.icon-close').click(function(){ 
     $('.menu').animate({left: '-285px'}, 
     200); 
     $('body').animate({left: '0px'}, 
     200); 
    }); 

Answer 1

如果我正確理解你的問題，這是因爲.icon-menu是一個div，與display: block爲默認的顯示設置。

將此設置爲display: inline-block應該可以解決您的問題。

.icon-menu { 
    display: inline-block; 
    /* other styles */ 
} 

的jsfiddle：http://jsfiddle.net/v1oj42j6/