html - CSS 居中列表元素符号和编号

标签 html css

我正在制作的网站存在问题。框内有 2 个列表,所有文本似乎都居中,元素符号位于文本的最左侧。我在本地主机上检查了这一点,没有发现任何问题。但是当我将其上传到我的网络服务器时,问题就发生了。我希望文本居中,但元素符号更靠近文本。附件是盒子的 CSS 和 HTML。还有包含问题的文件的链接 link (它已上线,但尚未公开链接)

.centerDivR {
  width: 80%;
  height: 500px;
  margin: 0 auto;
}
.rulesspace {
  width: 4%;
  height: 300px;
  float: left;
}
.news2 {
  width: 46%;
  height: 300px;
  background-color: rgba(192, 192, 192, 0.6);
  float: left;
  padding: 4px;
}
.rulesa {
  width: 46%;
  height: auto;
  float: left;
  padding: 4px;
}
.rulesb {
  width: 46%;
  height: auto;
  float: left;
  padding: 4px;
}
<div style="text-align: center; font size:12pt;"><span class="body"><a href="#">Server Rules</a>||<a href="#">Route Specific Rules</a>
    		||<a href="#">Local Information</a>
    		||<a href="#">Train & Destination Tags</a><br></div></span>
  <hr>
  <div class="centerDivR">
    <div class="rulesa">
      <div style="text-align: center;">
        <span class="h2"><i>General Rules:</i></span>
        <br>
        <br>
      </div>
      <ul>
        <li>No Advertiseing other servers</li>
        <li>Four Strike Policy
          <ol>
            <li>1st Warning</li>
            <li>2nd Warning</li>
            <li>2 Week Ban</li>
            <li>Perminate Suspension</li>
          </ol>
        </li>
        <li>Please keep foul language to a minimum</li>
        <li>Be considerate of other players</li>
        <li>Discussion or distribution of pirated or illegally acquired software is strictly prohibited</li>
      </ul>
    </div>
    <div class="rulesspace"></div>
    <div class="rulesb">
      <div style="text-align: center;">
        <span class="h2"><i>Multiplayer Server Rules:</i></span>
        <br>
        <br>
      </div>
      <ul>
        <li>No spanwing trains with out dispatcher permission</li>
        <li>No flipping switches while DS is on duty with out proper permission</li>
        <li>No passing red signals without G or P plates</li>
        <li>If a signal has stop indication but contains a G or P plate, stop, and ask DS to proceed at restricted speed</li>
        <li>Flipping switches & dropping signals without proper permission while a train is approaching is strictly prohibited.</li>
        <li>Hump Yard tags/settings are not to to be changed except by an Administrator.</li>
        <li>For the UP and BN trackage, call signals LOWER than clear.
          <br>(Clear Varients may be called)</li>
        <li>Obey all Speed limits</li>
        <li>Do not leave mainline switches open</li>
        <li>Special trains (circus trains, OCS trains, etc. may be run only with administrator permission)</li>
        <li>Running a track intended for traffic moving opposite your direction may be run ONLY with track warrant accompanying.</li>
        <li>If you need to leave with other players on the same trackage, you may step away and hold the main for 15 minutes.
          <br>If the limit is reached, your train will be saved and deleted for you to resume later.</li>
      </ul>
      </b>
    </div>
  </div>

最佳答案

您可能有一些不匹配的<div>元素或其他标记错误,请 valid您的 HTML 并修复它们。

如果您确实将列表项设置为居中对齐(或从容器继承)。试试这个:

li {
  list-style-position: inside;
}

<强> jsFiddle

body {
  text-align: center;
}
li {
  list-style-position: inside;
}
<ul>
  <li>No Advertiseing other servers</li>
  <li>Four Strike Policy
    <ol>
      <li>1st Warning</li>
      <li>2nd Warning</li>
      <li>2 Week Ban</li>
      <li>Perminate Suspension</li>
    </ol>
  </li>
  <li>Please keep foul language to a minimum</li>
  <li>Be considerate of other players</li>
  <li>Discussion or distribution of pirated or illegally acquired software is strictly prohibited</li>
</ul>

关于html - CSS 居中列表元素符号和编号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38081932/

相关文章:

javascript - 无法在 Mozilla 中播放音频

html - 以横向模式从 HTML 打印 SVG

javascript - 在类生成的 gsp 中显示图像

html - 网站上的随机水平滚动条

javascript - 如何制作气泡图随机位置

javascript - 容器太小时让div消失

javascript - 不同的屏幕尺寸使用不同的 CSS?

javascript - 使用 Javascript 在旧版浏览器上模拟 HTML5 功能

html - 为什么我的图像下面有空间?

javascript - 更改 Google map 位置时遇到问题