个人中心
gpt4 book ai didi

html - 无法使水平
    菜单居中或足够宽，不断换行

转载 作者：太空宇宙 更新时间：2023-11-03 21:20:43 25 4
gpt4 key购买 nike

我试图让我的网页看起来像这样: http://imgur.com/sRHv30U

不过，我在使用水平菜单时遇到了问题。我不确定我做错了什么，但由于某种原因它一直想换到下一行，即使当前行有足够的空间。我确定我忽略了某些事情或以完全错误的方式做了一些事情。我不太擅长这种事情。这是我的代码，任何帮助表示赞赏。

这是我的代码。我将#menu 背景颜色设置为橙色只是为了尝试看看发生了什么:

#header {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 36px;
  color: red;
  text-align: center;
}
#menu {
  background-color: orange;
  float: right;
  position: relative;
  left: -50%;
  text-align: left;
}
ul {
  list-style: none;
  position: relative;
  left: 50%;
}
ul li {
  list-style: none;
  float: left;
  background-color: red;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 15px;
}
ul li a {
  text-decoration: none;
  color: white;
  float: left;
  text-align: center;
}
a[href="#"]:hover {
  color: white;
  background: gray;
}
#left {
  margin-top: 100px;
  width: 160px;
  float: left;
  padding: 10px
}
#right {
  margin-top: 100px;
  width: 160px;
  float: right;
  padding: 10px;
}
#content {
  margin-top: 100px;
  margin-left: 200px;
  margin-right: 200px;
}
<div id="header">Ball State University Education Redefined
</div>
<div id="menu">
  <ul>
    <li><a href="#">About</a>
    </li>
    <li><a href="#">Admissions</a>
    </li>
    <li><a href="#">Academics</a>
    </li>
    <li><a href="#">Campus Life</a>
    </li>
    <li><a href="#">Athletics</a>
    </li>
    <li><a href="#">News</a>
    </li>
    <li><a href="#">Calendar</a>
    </li>
    <li><a href="#">Giving</a>
    </li>
  </ul>
</div>
<br/>
<br/>
<br/>
<div id="left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</div>
<div id="right">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</div>
<div id="content">

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
  ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
  duis dolore te feugait nulla facilisi.

</div>

最佳答案

这是您的代码更新。这是您想要的布局吗？

为了让它正常运行，我删除了 float: right;、left: -50%; 并更改为 text-align: center #menu，删除了 left: 50% 并在 ul

上添加了 display: inline-block

我还建议移除 li 上的 float ，并使用 flex 或 display: inline-block。

@charset "UTF-8";
/* CSS Document */

#header {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 36px;
  color: red;
  text-align: center;
}
#menu {
  background-color: orange;
  position:relative;
  text-align:center;
}
ul {
  list-style:none;
  position:relative;
  display: inline-block;
  padding: 0;
}
ul li{  
  list-style: none;
  float: left;
  background-color: red;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
}

ul li a {
  text-decoration: none;
  color: white;   
  float: left;
  text-align: center;
}

a[href="#"]:hover { 
  color: white;
  background: gray; 
}

#left {
  margin-top: 100px;
  width: 160px;   
  float: left;
  padding: 10px
}

#right {
  margin-top: 100px;
  width: 160px;
  float: right;
  padding: 10px;
}

#content {
  margin-top: 100px;
  margin-left: 200px;
  margin-right: 200px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link href="project1.4.css" rel="stylesheet" type="text/css"/>
  </head>

  <body>
    <div id="header">Ball State University Education Redefined
    </div>
    <div id="menu">
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Admissions</a></li>
        <li><a href="#">Academics</a></li>
        <li><a href="#">Campus Life</a></li>
        <li><a href="#">Athletics</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Calendar</a></li>
        <li><a href="#">Giving</a></li>
      </ul>
    </div>
    <br/>
    <br/>
    <br/>
    <div id="left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut. 
    </div>
    <div id="right">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut. 
    </div>
    <div id="content">

      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 

    </div>

  </body>
</html>

关于html - 无法使水平 <UL> 菜单居中或足够宽，不断换行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37735026/

25 4 0
文章推荐： CSS 随输入字段的 focus 属性变化
文章推荐： python - 函数输出为整数(TypeError : must be str, 不是 int)
文章推荐： python - 工作线程内的 Queue.put 失败
文章推荐： html - 页眉很好，100% 宽度在页脚上不起作用
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com