2

我只是在玩 Ruby on Rails 和 HTML。这个问题不是关于 RoR，而是关于 HTML 和 CSS。当我使身体居中时，我得到了这个： 帮助 http://img88.imageshack.us/img88/2203/help.tif

我怎样才能让项目符号在文本旁边居中？

另外，我怎样才能让 while 边框折叠，使其更接近文本？

这是我的代码：

我的应用布局：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
    <head>
        <%= javascript_include_tag :defaults -%>
        <title><%= page_title.capitalize -%></title>
        <%= stylesheet_link_tag 'main' %>
    </head>

    <body>
        <div id="body" style="margin:0 auto; width:600px;">
            <%= yield -%>
            <%= render :partial => "layouts/footer" -%>
        </div>
    </body>

</html>

我的页面，其中包含以下列表：

<h1 id="welcome_sign">Welcome!</h1>
<h3 id= "sitemap">Site Map </h3>

<ul>
    <li><%= link_to "Animals", "/animals"%></li>
        <ol><li><%= link_to "Hello", "/animals/hello"%></li></ol>
    <li><%= link_to "Machines", "/machines"%></li>
    <ol>
        <li><%= link_to "Products", "/machines/products" %></li>
        <li><%= link_to "Report", "/machines/report" %></li>
        <li><%= link_to "Robot", "/machines/robot" %></li>
        <li><%= link_to "Show", "/machines/show" %></li>
    </ol>
</ul>

最后，我的 CSS：

#footer {
    font-size: 10pt;
    padding: 10px;
}

#sitemap {
    margin-bottom: 1em;
    line-height: 1.5em;
    margin-left: 2.0em;
    padding: 10px;

}

#welcome_sign {
    padding: 10px;
 }

body {
    background-color: #CDEAFF;

}

#body {
    background-color: #fff;
    border-top: 5px solid #999;
    border-bottom: 5px solid #999;
    border-right: 5px solid #999;
    border-left: 5px solid #999;
    text-align: center;
}
4

6 回答 6

2

更好的做法是一次将文本居中一个元素，而不是在正文级别。

<html>
<body>
<div style="margin:0 auto;width:800px;">
<h4 style="text-align:center">Welcome</h4>
<ul>
    <li>List item</li>
    <li>List item</li>
</ul>
</div>
</body>
</html>

这不仅可以让您更好地控制布局，还可以让您仅将您想要的内容居中。

看到下面的代码后，删除 text-align: center; 在#body 标签中，这应该有助于减轻列表图标粘在左边的问题。

于 2009-07-04T21:12:41.707 回答
2

我假设当你说你想要列表居中时，你真正想要的是将边界框围绕列表居中。在其上使用表格显示模式并设置自动边距适用于除 IE 之外的所有内容。为了 IE，您必须在列表上设置宽度。

应该修复的另一件事是您构建列表的方式。应该出现在 ul 元素内的唯一元素是 li 元素。换句话说，ol应该出现在li里面。

这里全部放在一起：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style type="text/css">
      h1, h3 { text-align: center; }
      ul { margin-left: auto; margin-right: auto; width: 100px; }
    </style>
  </head>
  <body>
    <h1 id="welcome_sign">Welcome!</h1>
    <h3 id="sitemap">Site Map</h3>
    <ul>
        <li>
          Animals
          <ol>
            <li>Hello</li>
          </ol>
        </li>
        <li>
          Machines
          <ol>
            <li>Products</li>
            <li>Report</li>
            <li>Robot</li>
            <li>Show</li>
          </ol>
        </li>
    </ul>  
  </body>
</html>
于 2009-07-05T07:14:23.013 回答
1

我相信您想设置 text-indent 属性，并且可能还要调整边距和填充。

但是，从您的屏幕截图来看，您缺少对 HTML 的一些基本理解。你必须做一些古怪的事情来显示这样的子弹。

发布代码，我可以给出更好的解释。

于 2009-07-04T21:15:48.067 回答
1

问题是您将列表元素（文本）居中，而不是列表本身。如果您使用例如Firebug检查元素，那么您将看到每个元素的实际大小。然后你就会明白为什么它会这样居中。

我建议您阅读有关列表的本教程。

于 2009-07-04T21:51:17.447 回答
0

尝试将列表放入容器 div 中，并使用 margin-left/right: auto 技巧。我会避免将列表居中，因为它会破坏内容的组织。 

<div style="width: auto; margin-left: auto; margin-right: auto;">
[your list here]
</div>
于 2009-07-04T21:18:25.487 回答
0

仅供参考……您实际上可以为元素设置样式。就个人而言，我会缩小范围并将其居中。您还希望避免text-align: center对所有元素进行操作；即，您可能想要以下内容...

<style type="text/css">
    html { text-align: center; }
    body { width: 960px; margin: 0 auto; }
    li { text-align: left; }
</style>
于 2009-07-04T21:39:48.907 回答