製作與容器一樣寬的鏈接背景

Question

如何將鏈接的背景設置爲與其內部的容器一樣寬？
我當前的代碼：

.menu { 
 
\t width: 500px; 
 
\t height: 100%; 
 
\t background-color: gray; 
 
\t left: 0; 
 
\t top: 0; 
 
\t position: fixed; 
 
} 
 

 
.menu_content { 
 
\t top: 50px; 
 
\t position: relative; 
 
\t width: 100%; 
 
} 
 

 
a.menuBtn, a.menuBtn:visited { 
 
\t background-color: blue; 
 
\t padding-left: 20px; 
 
\t padding-top: 20px; 
 
\t padding-bottom: 20px; 
 
\t padding-right: 500px; 
 
\t text-decoration: none; 
 
\t color: white; 
 
}

<div class="menu"> 
 
\t \t <div class="menu_content"> 
 
\t \t \t <a href="#" class="menuBtn">Start</a> 
 
\t \t \t 
 
\t \t </div> 
 
\t </div>

我想它，不管鏈接文本有多長，有寬的藍色背景爲灰色背景。鏈接文本從左邊起爲20px。

由於填充，當前藍色背景變得更寬，如果文本更長。嘗試填充權利：100％，但顯然這沒有奏效。 值得一試，雖然

Answer 1

a.menuBtn{ display: block; }

，並清除padding-right:500px

Answer 2

剛剛從.menu類中刪除width屬性：

.menu { 
    height: 100%; 
    background-color: gray; 
    left: 0; 
    top: 0; 
    position: fixed; 
} 

現在，無論該鏈接是多久，.menu格將具有相同的寬度。

編輯： 或者，如果你想在div是至少 500像素寬給他min-width: 500px;屬性，而不是width

Answer 3

use below css. 

.menu { 
      width: 500px; 
      height: 100%; 
      background-color: gray; 
      left: 0; 
      top: 0; 
      position: fixed; 
     } 

     .menu_content { 
      top: 50px; 
      position: relative; 
      width: 100%; 
      padding: 20px 0; 
      background-color: blue; 
     } 

     a.menuBtn, a.menuBtn:visited { 
      text-decoration: none; 
      color: white; 
      padding: 0 15px; 
      width: 100%; 
     } 

Answer 4

我增加了一個DIV爲紐帶的包裝用CSS：

.menuBtnWrapper { 
    padding: 20px; 
    background-color: blue; 
    width: 100%; 
    box-sizing: border-box; 
} 

.menu { 
 
\t width: 500px; 
 
\t height: 100%; 
 
\t background-color: gray; 
 
\t left: 0; 
 
\t top: 0; 
 
\t position: fixed; 
 
} 
 

 
.menu_content { 
 
\t top: 50px; 
 
\t position: relative; 
 
\t width: 100%; 
 
    background-color: red; 
 
} 
 

 
a.menuBtn, a.menuBtn:visited { 
 
\t text-decoration: none; 
 
\t color: white; 
 
} 
 

 
.menuBtnWrapper { 
 
\t padding: 20px; 
 
\t background-color: blue; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
}

<div class="menu"> 
 
\t \t <div class="menu_content"> 
 
      <div class="menuBtnWrapper"> 
 
\t \t \t <a href="#" class="menuBtn">Start</a> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div>

Answer 5

使用CSS的calc()函數和display屬性.menuBtn並刪除多餘的填充。

像：

.menuBtn { 
    display: block; 
    width: calc(100% - 20px); /* Total Width (100%) - Padding (20px) */ 
} 

.menu { 
 
\t width: 500px; 
 
\t height: 100%; 
 
\t background-color: gray; 
 
\t left: 0; 
 
\t top: 0; 
 
\t position: fixed; 
 
} 
 

 
.menu_content { 
 
\t top: 50px; 
 
\t position: relative; 
 
\t width: 100%; 
 
} 
 

 
a.menuBtn, a.menuBtn:visited { 
 
\t background-color: blue; 
 
\t padding-left: 20px; 
 
\t padding-top: 20px; 
 
\t padding-bottom: 20px; 
 
\t /* padding-right: 500px; */ 
 
\t text-decoration: none; 
 
\t color: white; 
 
} 
 

 
.menuBtn { 
 
    display: block; 
 
    width: calc(100% - 20px); 
 
}

<div class="menu"> 
 
\t \t <div class="menu_content"> 
 
\t \t \t <a href="#" class="menuBtn">Start</a> 
 
\t \t \t 
 
\t \t </div> 
 
\t </div>

希望這有助於！

Answer 6

如果定義主播inline-block的它將能適應其容器的全寬：

.menu { 
 
\t width: 500px; 
 
\t height: 100%; 
 
\t background-color: gray; 
 
\t left: 0; 
 
\t top: 0; 
 
\t position: fixed; 
 
} 
 

 
.menu_content { 
 
\t top: 50px; 
 
\t position: relative; 
 
\t display: inline-block; 
 
\t width: 100%; 
 
} 
 

 
a.menuBtn, a.menuBtn:visited { 
 
\t background-color: blue; 
 
\t padding-left: 20px; 
 
\t padding-top: 20px; 
 
\t padding-bottom: 20px; 
 
\t text-decoration: none; 
 
\t color: white; 
 
\t display: inline-block; 
 
\t width: 100%; 
 
     box-sizing: border-box; 
 

 
}

<div class="menu"> 
 
\t \t <div class="menu_content"> 
 
\t \t \t <a href="#" class="menuBtn">Start</a> 
 
\t \t \t 
 
\t \t </div> 
 
\t </div>