我只是在玩 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;
}