將導航從浮動右側改爲居中時調整大小

我已經搜索並搜索，發現了類似的問題，但以前的任何線程都無法幫助我解決問題。在我的桌面主頁上，我的導航菜單向右移動。但是，當在移動設備上調整大小或查看時，我希望菜單項位於中心位置，而不是右移，因爲它看起來很亂。我已經嘗試了其他帖子的各種建議，但似乎沒有任何工作，這使我瘋了。我已經嘗試了媒體查詢，將對齊大小調整到一定的大小，並且不成功，所以我必須做出錯誤的決定。此外，它並不是一個重要的優先事項，但我注意到標題徽標在移動版本中的位置稍有不同，所以如果有人能幫助我，那也是非常棒的。預先感謝您的幫助！將導航從浮動右側改爲居中時調整大小

請參閱附加屏幕截圖。 Desktop Version Mobile Version

編輯：對不起，我忘記了密碼。這是一個大學課程，所以現在CSS和HTML合併成一個文檔，但稍後會有一個單獨的樣式表。此外，現場版本可以在geocities.ws/dinetown可以看出

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"> 
 

 
<style> 
 

 
#container { 
 
min-height: 100%; 
 
position: relative; 
 
} 
 

 
#header { 
 
padding: 1em; 
 
color: white; 
 
background: black; 
 
text-align: left; 
 
} 
 

 
#content { 
 
padding-bottom: 50px; 
 
} 
 

 
footer { 
 
height: 50px; 
 
line-height: 50px; 
 
left:0px; 
 
bottom:0px; 
 
position: absolute; 
 
width: 100%; 
 
display: inline-block; 
 
color: white; 
 
background: black: 
 
font-family: Majesti; 
 
background: black; 
 
text-align: center; 
 
vertical-align: center; 
 
} 
 

 
.header img { 
 
    float: left; 
 
    background: black; 
 
    width:100%; 
 
    overflow: hidden; 
 
} 
 

 
ul { 
 
list-style-type: none; 
 
margin: 0; 
 
padding: 0; 
 
overflow: hidden; 
 
width: 100%; 
 
background-color: rgb(190, 30, 45); 
 
font-family: Athelas; 
 
} 
 

 
li { 
 
float: right; 
 
} 
 

 
li a { 
 
float: right; 
 
display: block; 
 
color: white; 
 
text-align: center; 
 
padding: 14px 16px; 
 
text-decoration: none; 
 
} 
 

 
li a:hover { 
 
background-color: maroon; 
 
} 
 

 
html, 
 
body { 
 
margin: 0; 
 
padding: 0; 
 
height: 100%; 
 
font-family: Athelas; 
 
color: white; 
 
background: rgb(65, 57, 61); 
 
} 
 

 
p { 
 
padding-left: 30px; 
 
padding-right: 30px; 
 
padding-top: 15px; 
 
padding-bottom: 15px; 
 
} 
 

 
</style> 
 

 
    <title>Welcome to Town</title> 
 

 
</head> 
 

 

 
<body style="margin: 0;"> 
 
<div id="container"> 
 

 
<div id="header"> 
 
    <img src="images/logo.svg" width="400px"> 
 
</div> 
 

 
    <div id="content"> 
 
    <ul> 
 
    <li><a href="contact.html">CONTACT</a></li> 
 
    <li><a href="about.html">ABOUT US</a></li> 
 
    <li><a href="gallery.html">GALLERY</a></li> 
 
    <li><a href="social.html">SOCIAL HOUR</a></li> 
 
    <li><a href="menu.html">MENU</a></li> 
 
    <li><a class="active" href="index.html">HOME</a></li> 
 
    </ul> 
 

 

 
    <section style="margin: 0;"> 
 
    <img src="images/dining_room.png" width="100%" overflow="hidden"> 
 
    </section> 
 

 
    <article> 
 
    <p align="center"> 
 
    Our mission is to bring <b><i>quality</i></b>, <b><i>style</i></b> and the wish for 
 
    <b><i>good fortune</i></b> to all of our guests. We provide a high-end dining 
 
    experience through Chinese cuisine. 
 
    </p> 
 
    </article> 
 
</div> 
 

 
<footer> 
 
&copy; 2017 Andrew Struppa 
 
</footer> 
 

 

 
</div> 
 
</body> 
 
</html>

來源

2017-07-25 Andrew Struppa

請分享HTML + CSS或者創建小提琴 – tech2017

添加min-width媒體查詢，並把導航菜單的float:right在那裏。如果你想要導航的位置居中，給它一套width,display:block和margin:auto;在min-width媒體查詢中，您可以使width:auto抵消設置的寬度。

編輯：現在，我看你已經更新了你的代碼後，你可以從裏取出浮，添加display:inline-block並有媒體查詢是在UL到文本對齊，右。如果沒有浮動，你必須重新排列你的菜單。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"> 
 

 
<style> 
 

 
#container { 
 
min-height: 100%; 
 
position: relative; 
 
} 
 

 
#header { 
 
padding: 1em; 
 
color: white; 
 
background: black; 
 
text-align: left; 
 
} 
 

 
#content { 
 
padding-bottom: 50px; 
 
} 
 

 
footer { 
 
height: 50px; 
 
line-height: 50px; 
 
left:0px; 
 
bottom:0px; 
 
position: absolute; 
 
width: 100%; 
 
display: inline-block; 
 
color: white; 
 
background: black: 
 
font-family: Majesti; 
 
background: black; 
 
text-align: center; 
 
vertical-align: center; 
 
} 
 

 
.header img { 
 
    float: left; 
 
    background: black; 
 
    width:100%; 
 
    overflow: hidden; 
 
} 
 

 
ul { 
 
list-style-type: none; 
 
margin: 0; 
 
padding: 0; 
 
overflow: hidden; 
 
width: 100%; 
 
background-color: rgb(190, 30, 45); 
 
font-family: Athelas; 
 
text-align:center; 
 
} 
 

 
li { 
 
display:inline-block; 
 
} 
 

 
li a { 
 
float: right; 
 
display: block; 
 
color: white; 
 
text-align: center; 
 
padding: 14px 16px; 
 
text-decoration: none; 
 
} 
 

 
li a:hover { 
 
background-color: maroon; 
 
} 
 

 
html, 
 
body { 
 
margin: 0; 
 
padding: 0; 
 
height: 100%; 
 
font-family: Athelas; 
 
color: white; 
 
background: rgb(65, 57, 61); 
 
} 
 

 
p { 
 
padding-left: 30px; 
 
padding-right: 30px; 
 
padding-top: 15px; 
 
padding-bottom: 15px; 
 
} 
 
@media screen and (min-width: 768px) { 
 
ul{ 
 
text-align:right; 
 
} 
 
</style> 
 

 
    <title>Welcome to Town</title> 
 

 
</head> 
 

 

 
<body style="margin: 0;"> 
 
<div id="container"> 
 

 
<div id="header"> 
 
    <img src="images/logo.svg" width="400px"> 
 
</div> 
 

 
    <div id="content"> 
 
    <ul> 
 
    <li><a href="contact.html">CONTACT</a></li> 
 
    <li><a href="about.html">ABOUT US</a></li> 
 
    <li><a href="gallery.html">GALLERY</a></li> 
 
    <li><a href="social.html">SOCIAL HOUR</a></li> 
 
    <li><a href="menu.html">MENU</a></li> 
 
    <li><a class="active" href="index.html">HOME</a></li> 
 
    </ul> 
 

 

 
    <section style="margin: 0;"> 
 
    <img src="images/dining_room.png" width="100%" overflow="hidden"> 
 
    </section> 
 

 
    <article> 
 
    <p align="center"> 
 
    Our mission is to bring <b><i>quality</i></b>, <b><i>style</i></b> and the wish for 
 
    <b><i>good fortune</i></b> to all of our guests. We provide a high-end dining 
 
    experience through Chinese cuisine. 
 
    </p> 
 
    </article> 
 
</div> 
 

 
<footer> 
 
&copy; 2017 Andrew Struppa 
 
</footer> 
 

 

 
</div> 
 
</body> 
 
</html>

來源

2017-07-25 18:19:17

將導航從浮動右側改爲居中時調整大小

回答

相關問題