填充父母不工作

Question

我設計了一個響應式菜單。所以我會添加填充與親子價值。但是填充左側不能使用父母身份值和隱私政策菜單將打破。

.menu { 
 
\t width: auto; 
 
} 
 

 
.menu ul { 
 
\t list-style-type: none; 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 
.menu ul li { 
 
\t display: inline-table; 
 
} 
 

 
.menu a:link, .menu a:visited { 
 
\t padding: 12px 10%; 
 
\t display: block; 
 
\t text-decoration: none; 
 
\t color: black; 
 
\t text-transform: none; 
 
\t border-bottom: 2px solid white; 
 
\t transition: all .3s; 
 
\t -webkit-transition: all .3s; 
 
\t border: 1px solid red; 
 
\t width: auto; 
 
}

<div class="menu"> 
 
\t \t <ul> 
 
\t \t <li><a href="index.php">Home</a></li> 
 
\t \t <li><a href="about-us.php">About</a></li> 
 
\t \t <li><a href="contact-us.php">Contact</a></li> 
 
\t \t <li><a href="privacy-policy.php">Privacy Policy</a></li> 
 
\t \t </ul> 
 
\t </div>

結果：

問題出在哪裏？

我想使這個這樣的波紋圖像與響應：

我怎樣才能做到這一點？

在此先感謝。

Answer 1

的襯墊作爲父元素沒有定義的寬度將不作爲％工作，嘗試：

.menu ul li { 
    display: inline-table; 
    width: 100px; 
} 

地看到，10％的是則父元素的10％，如果它有一個固定的寬度。

Answer 2

如果你沒有定義父寬度，百分比在a中的定義，而不是像你想要的那樣，沒有相對的witdh使百分比。 所以儘量彌補以前ansswer，定義寬度父母，或使這個：

.menu a, .menu a:link, .menu a:visited { 
    padding: 12px 10px; 

定義填充與PX，而不是與％

即使這裏是一個fiddle與父母DWIDTH definitio，我喜歡爲此

in ul and not in li. 
.menu { 
    width: auto; 
    background: grey; 
} 

.menu ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    display:table; 
    width:100%; 
    background: green; 
} 

.menu ul li { 
    display: table-cell; 
    width:auto; 

} 

.menu a, .menu a:link, .menu a:visited { 
    padding: 12px 10%; 
    margin:auto; 
    display: block; 
    text-decoration: none; 
    color: black; 
    text-transform: none; 
    border-bottom: 2px solid white; 
    transition: all .3s; 
    -webkit-transition: all .3s; 
    border: 1px solid red; 

} 

或者你可以改變padding with px：

.menu { 
    width: auto; 
    background: grey; 
} 

.menu ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    display:table; 
    width:auto; 
    background: green; 
} 

.menu ul li { 
    display: table-cell; 
    width:auto; 

} 

.menu a, .menu a:link, .menu a:visited { 
    padding: 12px 10px; 
    margin:auto; 
    display: block; 
    text-decoration: none; 
    color: black; 
    text-transform: none; 
    border-bottom: 2px solid white; 
    transition: all .3s; 
    -webkit-transition: all .3s; 
    border: 1px solid red; 

} 

Answer 3

嘗試改變這些屬性來含Li的元素，並從菜單中刪除一個元素：

.menu ul li { 
    display: inline-table; 
    padding: 12px 10%; 
    border: 1px solid red; 
} 

*編輯：雖然，如果一個負責任的菜單是你以後，你可能想去一個不同的路線，例如將容器li元素的寬度設置爲％，例如24％或類似的東西。

.menu ul li { 
    display: inline-table; 
    width: 24%; 
}