Question

我正在创建一个Tumblr主题来处理我的CSS和HTML功能，我遇到了一个问题。

http://cl.ly/3c0q3X3a0A193z1u2u2V - 照片信息

正如您从上面的图片中看到的那样，文本似乎在没有任何其他代码的情况下自行扫描，而照片始终位于正确的位置。

每当涉及到这种事情时，我仍然处于起步阶段，所以我不确定该怎么做。

这是我的CSS和HTML：

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

<ul class="header">
    <li><a href="/"><h1>{Title}</h1></a>
    <li><a href="/about">About</a>
    <li><a href="/message">Message</a>
    <li><a href="/archive">Archive</a>
</ul>

<ul class="content">
    {block:Posts}
    {block:Text}
        <li class="text_post">
            {block:Title}
                    <h3><a href="{Permalink}">{Title}</a></h3>
                {/block:Title}
            {Body}
        </li>
    {/block:Text}
    {block:Photo}
        <li class="photo_post">
            <img src="{PhotoURL-500}">
        </li>
    {/block:Photo}
{/block:Posts}
</ul>

<style type="text/css">
body {
    font-family:Georgia, times, serif; 
    font-size:0.7em;}
h1 {
    display:inline;
    font-family:'Lucida Grande', Arial, sans-serif;
    font-size:100%;
    color:#00C462; }
ul, ol {
    list-style-type:none;
    margin:0;
    padding:0;}
.header {
    position:fixed;
    margin-top:1em;}
.header li {
    float:left;
    padding-left:1em;}
.header li a, a:visited {
    color:#000000;
    font-family:'Lucida Grande', Arial, sans-serif;
    text-decoration:none;}
.header li a:hover {
    color:#CCCCCC;}
.content {
    float:left;
    overflow:auto;
    margin-top:1.3em;
    width:500px;
    margin-left:23em;}
</style>

此外，如果您对如何改进我的代码有任何建议，请分享。

感谢您的帮助，

Answer 1

在我看来，你只是在.header上错过了一个宽度......

然后.content ul应该在它旁边很好地浮动。

您只需计算容器的内容即可。例如...

#container {
    width:800px; for example
    }
.header {
    width:300px;
    float:left;
    }
.content {
    width:500px;
    float:left;
    }

希望这会有所帮助......

Answer 2

首先，明确将 h3 的边距和填充设置为0.然后编写适当的规则，将边距/填充添加到底部h3。

其次，你为什么不漂浮标题＆amp;左边的内容类＆amp;分别对吗？这是我正在处理的主题的链接 - El Aleph。我正在做与我的博客标题和内容类似的事情。我刚刚将我的标题向左移动，我的内容向右移动。随意看看我的主题CSS。

另外，为什么使用UL作为块级内容？最好的方法是使用DIV来分割内容块或使用HTML5元素，如标题，文章等。

Tumblr主题：ul，li间距问题？

2 个答案: