【问题标题】:How to I remove the indent caused on either side of each blog post?如何删除每篇博文两侧造成的缩进?
【发布时间】:2016-01-31 16:39:51
【问题描述】:

我正在使用 Tumlbr,并希望删除每个帖子两侧的缩进。我希望博客文章的宽度为 100%。提前致谢。我正在编辑的网站的网址是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>

【问题讨论】:

    标签: html css html-lists blogs tumblr


    【解决方案1】:

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

    `ol{padding: 0;}`
    

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

    编辑:要将黑框一直移到上面,可以将 body 的左右边距设置为 0:

    body{margin:auto 0;}
    

    CSS 重置可以帮助您避免所有这些 ^.^

    【讨论】:

    • 非常感谢您的大力帮助,但是后箱仍然没有接触到屏幕的每一侧。 @peyssoa
    • 谢谢你完全解决了我的问题。你是英雄@peyssoa
    猜你喜欢
    • 2019-09-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多