个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在尝试将菜单设置为特定大小，这样我就不必移动填充，以防用户的名字很小(请参见下面的代码)
我尝试了多种显示类型和 float ，我是它的新手，我们在类里面这样做很遗憾，我们不能使用 Bootstrap，所以一切都很难居中。
通常它应该给出这个但是用户可以移动(这是下面代码没有修改用户名的当前结果:
.
我有一些基本的 php 供以后使用，因为我需要更改用户，但它与 PHP 并没有真正相关
<?php
include('header.php');
include('body.php');
include('footer.php');
?>
我有定义 Logo 和第一个菜单的标题
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/styles.css">
</head>
<body>
<ul>
<a href="https://www.suissemobile.ch"><img class="Image-LOGO" src="../pictures/logo_smo.gif" alt=""></a>
<li><a class="Menu" href="../index.php">Home</a></li>
<li><a class="Menu" href="news.asp">Excursions</a></li>
<li><a class="Menu" href="https://www.travel.sbb.ch">Agence CFF</a></li>
<li><div class="Menu-Login"><a class="Menu-Login-Link" href="www.travel.sbb.ch">Login</a> User : -----</div></li>
</ul>
</body>
</html>
我有我的 body 只是为了图像
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/styles.css">
</head>
<img class="Image-Body" src="../pictures/body.jpg" alt="">
<div class="Image-Source">® 2009 - Fondation SuisseMobile - <a href="https://www.suissemobile.ch">www.suissemobile.ch</a></div>
最后我的第二个菜单在底部
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/styles.css">
</head>
<pre></pre>
<ul>
<li><a class="Menu-Bottom" href="../index.php">Contact</a></li>
<li><a class="Menu-Bottom" href="news.asp">Degrés de difficulté</a></li>
<li><a class="Menu-Bottom" href="https://www.travel.sbb.ch">Newsletter</a></li>
<li><a class="Menu-Bottom" href="https://www.travel.sbb.ch">Impressum</a></li>
</ul>
最重要的当然是CSS
ul {
list-style-type: none;
overflow: hidden;
margin: auto;
width: 649px;
display: table;
text-align: center;
font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
padding-bottom: 1%;
}
li {
display: inline-block;
float: none;
}
a {
text-decoration: none;
}
.Menu, .Menu:link, .Menu:visited {
display: block;
font-weight: bold;
color: #FFFFFF;
background-color: #2A599C;
text-align: center;
padding: 3px;
text-decoration: none;
text-transform: uppercase;
padding-left: 20%;
padding-right: 20%;
}
.Menu:hover, .Menu:active {
background-color: red;
}
.Menu-Bottom, .Menu-Bottom:link, .Menu-Bottom:visited {
display: block;
font-weight: bold;
color: #FFFFFF;
background-color: #2A599C;
text-align: center;
padding: 3px;
text-decoration: none;
text-transform: uppercase;
padding-left: 12.65%;
padding-right: 12.65%;
}
.Menu-Bottom:hover, .Menu-Bottom:active {
background-color: red;
}
.Menu-Login, .Menu-Login:link, .Menu-Login:visited {
display: block;
width: 200px;
font-weight: bold;
color: #FFFFFF;
background-color: #2A599C;
text-align: center;
padding: 3px;
text-decoration: none;
text-transform: uppercase;
}
.Menu-Login:hover, .Menu-Login:active {
background-color: red;
}
.Menu-Login-Link {
color: #FFFFFF;
text-decoration: none;
text-transform: uppercase;
}
.Image-LOGO {
display: block;
padding-left: 90.7%;
padding-bottom: 1%;
}
.Image-Body {
display: block;
margin-left: auto;
margin-right: auto;
padding-left: 40px;
width: 649px;
}
.Image-Source{
display: block;
margin-left: auto;
margin-right: auto;
padding-left: 40px;
width: 649px;
}
我很乐意以页面固定的方式输出它(就像现在)，但如果用户名移动，它不会让我感到烦恼。真正的问题主要是是否可以设置菜单宽度，如果可以的话如何设置？我知道 width 不能正常工作，
最佳答案
你好，我不确定这是否是你想要的样子，但你可以查看 http://jsfiddle.net/pt4us5az/1/...所以我只是从 .Menu, .Menu:link, .Menu:visited { 和 .Menu-Bottom, 中删除 .Menu, .Menu-Bottom, .Menu-Bottom:link, .Menu-Bottom:visited {
然后我删除了一些 css 代码，比如
padding-left: 20%;
padding-right: 20%;
和
padding-left: 12.65%;
padding-right: 12.65%;
就是这样。希望我能帮到你。
关于html - 如何在 CSS 中设置定义的菜单大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56182892/
26
4
0
我是一名优秀的程序员,十分优秀！