如何删除每个博客两边的缩进 post？

Question

我正在使用 Tumlbr，希望删除每个 post 两边的缩进。我希望博客 post 的宽度为 100%。提前致谢。我正在编辑的网站 url 是 http://jarroldtheme.tumblr.com.

<!DOCTYPE html>
<html>
<head>
    <title>{title}</title>
    <link rel="shortcut icon" href="{Favicon}">
    <link rel="alternate" type="application/rss+xml" href="{RSS}">
    {block:Description}
        <meta name="description" content="{MetaDescription}" />
    {/block:Description}
    <style>
    header h1 {
        color: {TitleColor};
        font-family: {TitleFont};
        font-weight: {TitleFontWeight};
        text-align: center;
        font-size: 35px;
        padding-top: 20px;
        padding-bottom: 4px;
    }
    header p {
        color: black;
        font-family: helvetica;
        text-align: center;
        font-size: 18px;
    }
    header a {
        color: {TitleColor};
        text-decoration: none;
    }
    .page {
        text-align: center;
        padding-top: 25px;
    }
    .page a {
        text-decoration: none;
        border-bottom: 1px solid #000;
        font-size: 16px;
        margin-left: 5px;
        margin-right: 5px;
        padding-bottom: 3px;
    }
    body {
        background: {BackgroundColor};
        font-family: helvetica;
    }
    .post {
        text-align: center;
        padding-top: 45px;
        padding-bottom: 45px;
        list-style: none;
    }
    .link-post {
        background: #000;
    }
    .like-reblog {
    list-style: none;
  }
  .like-reblog li {
    float: right;
    padding: 6px;
  }
    .quote-source {
        padding:20px;
        font-style: italic;
    }
    form {
        text-align: center;
    }
    .sfm input {background-color: #f5f5f5; 
    font-size: 9px;
    border: 0px; 
    text-transform: lowercase; 
    margin-top: 0px; 
    color: #999; 
    letter-spacing: 1px; 
    padding: 4px 8px;
    font-family: helvetica, arial;}
    input[type="submit"] {
      background: #900000;
      color: white;
    }
</style>
</head>
<body>
<header>
    {block:haspages}
    <div class="page">
        {block:pages}
        <a href="{URL}">{Label}</a>
        {/block:pages}
    </div>
    {/block:haspages}
    <h1><a href="{BlogURL}">{title}</a></h1>
    {block:Description}
    <p>{Description}</p>
    {/block:Description}
    <form action="/search" method="get" class="sfm">
    <input type="text" name="q" value="{SearchQuery}" id="sf"/>
    <input type="submit" value="Search" id="sb"/>
</form>
</header>
 <ol>
            {block:Posts}{block:Text}
            <div class="post">
                    <li>
                        {block:Title}
                            <h3><a href="{Permalink}">{Title}</a></h3>
                        {/block:Title}{Body}
                    </li>
                    <ul class="like-reblog">
            <li>{block:NoteCount}<a href="{Permalink}#notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li><li>{likebutton}</li><li>{reblogbutton}</li>
            </ul>
                    </div>
                {/block:Text}{block:Photo}
                <div class="post">
                    <li>
                        <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>

                        {block:Caption}
                            {Caption}
                        {/block:Caption}
                    </li>
                    <ul class="like-reblog">
            <li>{block:NoteCount}<a href="{Permalink}#notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li><li>{likebutton}</li><li>{reblogbutton}</li>
            </ul>
                    </div>
                {/block:Photo}{block:Panorama}
                <div class="post">
                    <li>
                        {LinkOpenTag}
                            <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
                        {LinkCloseTag}{block:Caption}
                            {Caption}
                        {/block:Caption}
                    </li>
                    <ul class="like-reblog">
            <li>{block:NoteCount}<a href="{Permalink}#notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li><li>{likebutton}</li><li>{reblogbutton}</li>
            </ul>
                    </div>
                {/block:Panorama}{block:Photoset}
                <div class="post">
                    <li>
                        {Photoset-500}{block:Caption}
                            {Caption}
                        {/block:Caption}
                    </li>
                    <ul class="like-reblog">
            <li>{block:NoteCount}<a href="{Permalink}#notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li><li>{likebutton}</li><li>{reblogbutton}</li>
            </ul>
                    </div>
                {/block:Photoset}{block:Quote}
                <div class="post">
                    <li>
                        "{Quote}"
                        {block:Source}
                            <div class="quote-source">{Source}</div>
                        {/block:Source}
                    </li>
                    <ul class="like-reblog">
            <li>{block:NoteCount}<a href="{Permalink}#notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li><li>{likebutton}</li><li>{reblogbutton}</li>
            </ul>
                    </div>
                {/block:Quote}{block:Link}
                <div class="post">
                <div class="link-post">
                    <li>
                        <a href="{URL}" class="link" {Target}>{Name}</a>

                        {block:Description}
                            {Description}
                        {/block:Description}
                    </li>
                    </div>
                    <ul class="like-reblog">
            <li>{block:NoteCount}<a href="{Permalink}#notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li><li>{likebutton}</li><li>{reblogbutton}</li>
            </ul>
                    </div>
                {/block:Link}{block:Chat}
                <div class="post">
                    <li>
                        {block:Title}
                            <h3><a href="{Permalink}">{Title}</a></h3>
                        {/block:Title}

                        <ul>
                            {block:Lines}
                                <li class="{Alt} user_{UserNumber}">
                                    {block:Label}
                                        <span>{Label}</span>
                                    {/block:Label}{Line}
                                </li>
                            {/block:Lines}
                        </ul>
                    </li>
                    <ul class="like-reblog">
            <li>{block:NoteCount}<a href="{Permalink}#notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li><li>{likebutton}</li><li>{reblogbutton}</li>
            </ul>
                    </div>
                {/block:Chat}{block:Video}
                <div class="post">
                    <li>
                        {Video-500}{block:Caption}
                            {Caption}
                        {/block:Caption}
                    </li>
                    <ul class="like-reblog">
            <li>{block:NoteCount}<a href="{Permalink}#notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li><li>{likebutton}</li><li>{reblogbutton}</li>
            </ul>
                    </div>
                {/block:Video}{block:Audio}
                <div class="post">
                    <li>
                        {AudioEmbed}{block:Caption}
                            {Caption}
                        {/block:Caption}
                    </li>
                    <ul class="like-reblog">
            <li>{block:NoteCount}<a href="{Permalink}#notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li><li>{likebutton}</li><li>{reblogbutton}</li>
            </ul>
                    </div>
                {/block:Audio}
                {/block:Posts}
        </ol>
</body>
</html>

Answer 1

如果您的意思是您试图让 ID 为 post 的元素一直移动到每一侧，您可以尝试将有序列表的填充设置为 0。检查它使用 Chrome 开发工具。

`ol{padding: 0;}`

我还建议使用 css 重置来删除浏览器默认样式，例如 normalize.css。他们真的帮了很多忙

编辑：要将黑框一直移到上方，您可以将正文的左右边距都设置为 0：

body{margin:auto 0;}

a CSS 重置可以帮助您避免做这一切 ^.^

如何删除每个博客两边的缩进 post？

How to I remove the indent caused on either side of each blog post?

html

css

blogs

html-lists

tumblr