Question

我正在寻找一些帮助来固定ul菜单，我设法将图像置于页面中心，ul中的文本居中，但实际的块本身不是。

我尝试了各种编码，但似乎没有任何工作。我对编码场景还是比较陌生的，所以我只是在找一些有用的东西。我没有任何<dev>，而且头部没有任何内容。（我知道需要添加编码的地方，我只是不确定要放什么）

真的希望有人可以帮助我，希望有一天我能掌握这一天。（我有一个菜单栏，所以文本实际上有一个背景等。）

这就是我所拥有的：

<!-- Main menu content below -->
<ul style="text-align: center;" id="Menubar1" class="MenuBarHorizontal">
  <li><a href="#">Shop</a></li>
  <li><a href="#">Forum</a></li>
  <li><a href="#">What's new</a></li>
  <li><a href="#">Calendar</a></li>
  <li><a href="#" class="MenuBarItemSubmenu">Newsletter</a>
    <ul>
      <li><a href="#">Current</a></li>
      <li><a href="#">Archived</a></li>
    </ul>
  </li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Advice</a></li>
</ul>

编辑：

    <!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>Work in progress</title>
  <style type="text/css">
body {
    background-image: url(Homepage_images/Home_background.png);
    background-repeat: repeat-x;
    background-color: #47807E;
    border-top-color: #77D6D2;
    text-align: center;
}

{margin: 0; padding: 0; list-style: none;}
ul {
    text-align: center;
}
ul li {display: inline-block;}
ul li a {display: inline-block; padding: 5px; text-decoration: none; border: 1px solid #ccc; border-radius: 3px; color: #000;}
ul li ul {display: none;}

  </style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
  <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>


<body class="MenuBarHorizontal">

<div align="center">

<p><img alt="New Tome City" src="Homepage_images/New_title.png" style="width: 780px; height: 220px;" title="Click here to enter NTC!" /></p>


<p>&nbsp;</p>

</div>

<!-- Main menu content below -->
<ul id="MenuBar1" class="MenuBarHorizontal MenuBarActive">
  <li><a href="#" class="">Shop</a></li>
  <li><a href="#" class="">Forum</a></li>
  <li><a href="#" class="">What's new</a></li>
  <li><a href="#" class="">Calendar</a></li>
  <li><a href="#" class="MenuBarItemSubmenu">Newsletter</a>
    <ul class="">
      <li><a href="#" class="">Current</a></li>
      <li><a href="#" class="">Archived</a></li>
    </ul>
  </li>
  <li><a href="#">Blog</a></li>
  <li><a href="#" class="">Advice</a></li>
</ul>

<p>&nbsp;</p>
<p><big><span style="font-weight: bold; color: rgb(255, 255, 255);"><span style="font-family: Gabriola,sans-serif; font-size: 42pt; text-align: center;">Welcome to New Tome City</span></span></big>
</p>
<p style="text-align: center;">Welcome to New tome City!</p>

<div align="center">
<img src="Homepage_images/FeSt_link.png" alt="FeSt" height="193" width="800" /><br />
Testing</div>


<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

Answer 1

您可以将display的{{1}}更改为block <ul>，inline-block更改为<li>，并以此方式提供text-align: center：

＆＃13;

* {margin: 0; padding: 0; list-style: none;}
ul {text-align: center;}
ul li {display: inline-block;}
ul li a {display: inline-block; padding: 5px; text-decoration: none; border: 1px solid #ccc; border-radius: 3px; color: #000;}
ul li ul {display: none;}

＆＃13;

<ul style="text-align: center;" id="Menubar1" class="MenuBarHorizontal">
  <li><a href="#">Shop</a></li>
  <li><a href="#">Forum</a></li>
  <li><a href="#">What's new</a></li>
  <li><a href="#">Calendar</a></li>
  <li><a href="#" class="MenuBarItemSubmenu">Newsletter</a>
    <ul>
      <li><a href="#">Current</a></li>
      <li><a href="#">Archived</a></li>
    </ul>
  </li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Advice</a></li>
</ul>

＆＃13;

预览

注意：我添加了一些样式以使其看起来更好。希望你喜欢它。

中心<ul>菜单

1 个答案: