真正的痛苦，你所面對現在，是你用所有寬度的百分比。
這聽起來像是一個好主意，但問題是這樣的：
父母會知道它的內容有多寬，然後設置它的寬度以匹配它的孩子，填充的百分比就是那個百分比寬度。如果孩子的填充是以百分比爲基礎的（基於每個元素的不同寬度），那麼你的尺寸有變化，這意味着父母需要重新調整其寬度，重新計算等等。
這不起作用。
此外，您還會遇到舍入錯誤，每個瀏覽器的輪次略有不同。百分比很好，直到你必須弄清楚有多少像素。
而且它甚至不是最外層箱子的某個百分比的問題;父母的祖父母的10％寬度的5％寬度意味着如果孫子被四捨五入一個像素，父母將四捨五入一個像素，意味着祖父母將被四捨五入成像素...
除非四捨五入反過來，在這種情況下，您的孫子的寬度較小，並且/或者您的父母擁有的子女空間較小。
而是把自己介紹給這個世界傷害的，我建議像下面這樣：一切
- 使用邊界框，所有的時間（使用
*而不是單獨應用它）
- 使用的利潤率非常謹慎，只適合水平居中時，有沒有別的那會出現在該行
- 使用
display: inline-block;次數多了，text-align: center|left|right;父來控制內容的流動
- 使用
em和rem進行填充，在尺寸或者相對於字體大小在widget你現在裏面（em），或相對於默認字體大小（rem）;而不是font-size: 350%可以使用font-size: 3.5rem;
- 嘗試使用命名良好的類（在BEM或SuitCSS中，或OOCSS樣式中，如果有幫助）樣式，而不依賴於HTML選擇器或ID;我這樣說，因爲你的頁面複雜性的增長，兩套
div div div span碰撞（從而成爲一個痛苦的風格不同）成爲非常高而.MediaPlayer-button機會與.CommentSection-submit碰撞的可能性仍然恰好爲0，所以只要CSS選擇器沒有嵌套。
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
html {
font: 14px/20px Arial, sans-serif;
}
/* I've moved most of the commonly-repeating housekeeping CSS into utility classes */
.u-floatLeft {
float: left;
}
.u-floatRight {
float: right;
}
.u-noMargin {
margin: 0;
}
.u-inlineBlock {
display: inline-block;
}
.u-table {
display: table;
}
.u-tableCell {
display: table-cell;
}
.u-fullHeight {
height: 100%;
}
.Header {
background-color: #333;
/* by making the height REM-based, the header now updates in relative-size,
as the base font-size changes, without needing to recalculate */
height: 6rem;
}
.Logo {
color: #fff;
font-size: 3.5rem;
/* === 350%, but is more idiomatic, as its text-based */
/* by making the line-height match the parent height,
the logo-text will align itself properly */
line-height: 6rem;
/* I don't need any other margin or padding, now, except to move it right;
use margin, instead, if the text needed its own background-color */
padding-left: 0.75em;
}
.HeaderNav {
background-color: #d50000;
}
.HeaderNav-list {
/* <ul> and <ol> have a margin and a padding-left by default */
/* 150% of an EM at this font-size and font-family */
padding: 0 1.5em;
vertical-align: middle;
}
.HeaderNav-item {
/* instead of % of total width, padding is now % of single EM */
padding: 0 0.2em;
}
.HeaderNav-link {
color: #fff;
font-weight: bold;
text-decoration: none;
}
.HeaderNav-link:hover {
text-decoration: underline;
}
.HeaderNav-link--current {}
<!doctype html>
<html>
<head>
</head>
<body>
<header class="Header">
<h1 class="Logo u-floatLeft u-noMargin u-fullHeight">Lago Siu</h1>
<nav class="HeaderNav u-table u-floatRight u-fullHeight">
<ul class="HeaderNav-list u-tableCell u-noMargin u-fullHeight">
<li class="HeaderNav-item u-inlineBlock">
<a href="#" class="HeaderNav-link HeaderNav-link--current">Home</a>
</li>
<li class="HeaderNav-item u-inlineBlock">
<a href="#" class="HeaderNav-link">Menu pranzo</a>
</li>
<li class="HeaderNav-item u-inlineBlock">
<a href="#" class="HeaderNav-link">Menu cena</a>
</li>
<li class="HeaderNav-item u-inlineBlock">
<a href="#" class="HeaderNav-link">Info</a>
</li>
</ul>
</nav>
</header>
</body>
</html>
我希望幫助，既解決問題，並給出了這是怎麼回事，在你未來的問題，以及如何解決他們的一些基礎。
看起來沒有足夠的水平空間在一行中顯示所有項目。 –