Html 在计算机之间更改位置的菜单栏
我的网站上的主菜单栏有问题。我只是想说清楚，我指的是我网站上的菜单栏，上面有“关于”和“家”等链接。我想把这个菜单栏放在我的电脑中央，电脑有15个屏幕。然而，当我在其他电脑上查看我的网站时，有些电脑屏幕更大，菜单栏明显偏离了左右中心，看起来有点垃圾。如何使菜单栏的位置标准化，使其位于中心位置，而不管使用何种internet浏览器或不同的屏幕尺寸 谢谢 本Html 在计算机之间更改位置的菜单栏,html,css,menu,positioning,Html,Css,Menu,Positioning,我的网站上的主菜单栏有问题。我只是想说清楚，我指的是我网站上的菜单栏，上面有“关于”和“家”等链接。我想把这个菜单栏放在我的电脑中央，电脑有15个屏幕。然而，当我在其他电脑上查看我的网站时，有些电脑屏幕更大，菜单栏明显偏离了左右中心，看起来有点垃圾。如何使菜单栏的位置标准化，使其位于中心位置，而不管使用何种internet浏览器或不同的屏幕尺寸 谢谢 本 首先，从你的元素中去掉绝对位置。不必总是给位置：绝对来做一个div中心 然后按如下方式更改样式 #content { font-fam
首先，从你的元素中去掉绝对位置。不必总是给位置：绝对来做一个div中心 然后按如下方式更改样式
#content {
font-family:'lobster', cursive;
width: 500px;
font-size: 23px;
margin:auto;
}
如果你能为你的酒吧在屏幕上的位置计算出正确的值，你可以达到你想要的，但是，要在不同的屏幕几何上保持这个位置是很困难的。如果您确实想将一个元素放置在屏幕的中间和底部，那么这可能会帮助您： HTML:
注意，我已经使用了Nav元素作为我的持有者，给它一个100%的宽度，所以它调整到任何屏幕/窗口的几何形状，然后我给了我的UL绝对大小和背景，所以它总是在中间。然后我把导航设置在波顿，把所有的东西都放在那里。提示：如果您希望导航栏始终位于底部，还可以使用“固定定位”属性。
在这里，我已经按照我认为您需要的方式编辑了您的网站： HTML首先使用CSS重置所有元素都是绝对的，除了将它们居中之外还有其他原因吗？您可以使用位置：相对；左边距：自动；右边距：自动；将项目放在页面的中心。这将防止页面上的元素到处重叠。此外，您不应该像以前那样直接在css中更改所有html标记。您应该只更改在整个文档中不会更改的字体属性之类的内容。改为创建类和id，并通过其类或id更改元素的css。这将清理您的代码，并防止不希望的行为添加到我以前的评论中，当我说您应该添加类时，将它们添加到元素本身并使用.menuItem{…}在你的css中，或者用一个带有id或class的div来包围这些项目，而在你的css.menuItems>ul>li{…}谢谢你的回复。如果我去掉“绝对”菜单，菜单在顶部会显示得更长。这是故意的，因为我希望它在底部居中。谢谢。我没有得到确切的要求。你能更具体一些吗？你的css满是乱七八糟的。试着从Scratch重新启动。我希望菜单显示在该页面的中间底部。我使用绝对定位的原因是，我可以定义我想要它去的地方，在中间和底部。然而，在其他计算机上，它不是在底部居中。它要么在左边，要么在右边，这取决于电脑屏幕的大小。它变了，我不知道为什么。那就是为什么你不在页脚上用导航
#content {
font-family:'lobster', cursive;
width: 500px;
font-size: 23px;
margin:auto;
}
ul{
list-style-type:none;
width:500px;
position:absolute;
bottom:0;
}
ul li{
display:inline-block;
}
ul li a{
display:block;
color:#000;
text-decoration:none;
}
<nav id="Navbar">
<ul id="Buttonbar">
<li>Link</li>
<li>Link #2</li>
</ul>
</nav>
#Navbar {
display: block;
overflow: hidden;
width: 100%;
height: 64px;
position: absolute;
bottom: 15px;
}
#Buttonbar {
display: block;
overflow: hidden;
padding: 0px;
width: 400px;
height: 100%;
margin: 0px auto 0px auto;
background: grey;
}
#Buttonbar>li{
display: block;
float: left;
overflow: hidden;
list-style: none;
padding: 0px;
margin: 0px;
}
<body>
<div id="content">
<h1>About Me</h1>
<h2>The Beginning:</h2>
<div id="beginning">
<p>I absolutely love coding ever since I was young. I started finding the fascination with it when I started playing a game called "runescape". When I started playing in 2007, the "botting" community started to grow massively. As a full time gamer, I found this out within that community. During my subscription with the botting client "powerbot", I started to learn JAVA and played around with other people's code. Even though I never became an expert within that language, I managed to design simple scripts which allowed my character to level up on basic skills whilst I was alseep! I loved the problem solving! I absolutely loved the community and how everyone worked as a team. However, I soon grew out of it after Runescape's anti-botting software got too advanced and I decided to play normally!</p>
</div>
<h3>SEO and Web Developing:</h3>
<div id="seo">
<p>After finishing my education, I decided not to study a degree as there wasn't anything that I felt suited me at that time. I preferred to take on more of an entrepreneurial career. I decided to join my friend's business "GR Syndicate". Over that following years, I learnt SEO and Web developing. The Web Developing purely consisted of only coding with HTML and CSS and the websites we created were used to sell cosmetic products off. During that time, I built upon my SEO skills and developed them to rank high in Google's SERPS.</p>
</div>
<h4>The Present</h4>
<div id="present">
<p>After working in GR Syndicate and in customer service, coding was missing from my life. This is when I decided to practice my code by building a website about one of my other passions, dogs. This gave me the opportunity to really understand CSS3 and HTML5. Even though I find CSS3 hard as there are a lot of interactive elements involved, it is my favorite part of CSS. I absolutely love the animations I see on "CSS Deck" being created the whole time. This gave me the motivation to add a couple of CSS3 elements in this website, and in my other website, such as a hero that consisted of changing pictures. After learning about more code from producing the dog website, I realised how much I loved doing it. This is when I started looking at courses, and found General Assembly. I went to the open day and I was very impressed, and I hope you are too with this website!</p>
</div>
</div>
<div id="mainMenu">
<div class="grow">
<ul>
<li><a href="index.html">Home</a>
</li>
<li><a href="aboutme.html">About me</a>
</li>
<li><a href="like.html">What I love</a>
</li>
</ul>
</div>
</div>
</body>
body {
font-family:'Lobster', cursive;
color:black;
min-width:500px;
}
#content {
width: 500px;
font-size: 23px;
margin:auto;
position:relative;
}
#content>h1 {
text-align:center;
text-decoration: underline;
}
a {
color: black;
text-decoration: none;
font-weight: bold;
}
#mainMenu ul {
margin:0 auto;
padding: 10px;
background: #dcf3ff;
border-width: 6px;
border-style: solid;
border-color: white;
}
#mainMenu ul>li {
display: inline-block;
padding: 0px 15px 0px 15px;
border-right: 2px solid black;
border-left: 2px solid black;
}
#mainMenu {
left:0;
right:0;
position:absolute;
min-width:500px;
}
#mainMenu>.grow {
position:relative;
width:100%;
text-align:center;
}
.grow {
-webkit-transition-duration: 0.7s;
transition-duration: 0.7s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow:hover {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}