gpt4 book ai didi

以 HTML/CSS 为中心的格式

转载 作者:太空宇宙 更新时间:2023-11-04 14:49:09 25 4
gpt4 key购买 nike

我只是在摆弄 Ruby on Rails 和 HTML。这个问题不是关于 RoR,而是关于 HTML 和 CSS。当我将我的 body 居中时,我得到这个: Help 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;
}

最佳答案

我假设当您说希望列表居中时,您实际想要的是将列表周围的边界框居中。在其上使用表格显示模式并设置自动边距适用于除 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>

关于以 HTML/CSS 为中心的格式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1082969/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com