如何删除每篇博客帖子两侧的缩进?

时间:2016-01-31 16:39:52

标签: html css html-lists blogs tumblr

我正在使用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>

1 个答案:

答案 0 :(得分:0)

如果你的意思是你试图让带有帖子ID的元素一直移动到每一边,你可以尝试将有序列表的填充设置为0.使用Chrome开发工具检查它。< / p>

`ol{padding: 0;}`

我还建议使用css reset来删除浏览器默认样式,例如normalize.css。他们确实帮了很多钱。

编辑:要完全移动黑匣子,您可以在左右两侧将身体边距设置为0:

body{margin:auto 0;}

CSS重置可以帮助您避免这么做^。^