Question

我想在div的中心放置一个（特色的）标记行，其中后面的音符计数位于左侧，而tumblr like-reblog按钮位于右侧。

示例：http://i.imgur.com/G70O6An.jpg?1?5657

问题：由于标记行div已超过这些，因此阻止了点击它们的能力。

css：

.post_post {
    width: 472px;
    background-color:#f6f6f6;
    padding:12px 14px 10px 14px;
    border-top: 1px solid #eee;
    top: 0px!important;
    left: 0px;
    display: block;
    float:left;
    position: relative;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

.tags {
    position: absolute;
    display: inline;
    left: 0px!important;
    width: 500px;
    float: left;
    text-align: center;
    z-index: 1;
}
.tags a {
    background-color:;
    color: #fff;
    padding: 3px 6px 3px 6px;
    margin-right: 6px;
    border-radius: 3px;
    display: none;
}

.tags a.news {
    background-color: {color:News Tag};
    display: inline!important;
}

.tags a.featured {
    background-color: {color:Featured Tag};
    display: inline!important;
}

.tags a.photos {
    background-color: {color:Photos Tag};
    display: inline!important;
}

HTML：

<div class="post_post">
        <a href="{permalink}">{NoteCountWithLabel}</a>

        {block:HasTags}
        <span class="tags">
            {block:Tags}
            <a href="{TagURL}" class="{Tag}">{Tag}</a> 
            {/block:Tags}
        </span>
        {/block:HasTags}

        <ul class="like_and_reblog_buttons">
            <li>{ReblogButton size="16" color="grey"}</li>
            <li>{LikeButton size="16" color="grey"}</li>
        </ul>
</div>

我知道我做错了什么，但无论显示多少标签，这都是我在中心获得div的唯一方法。

Answer 1

我绝不是CSS大师，因为我主要使用后端编码，但这里有一些关于CSS / HTML代码的注意事项。

您使用id="tags"，但我假设您的标记CSS定义缺少#运算符。另外，如果您的网站上的每个帖子都会重复此操作（看起来像tumblr？），则id="tags"需要变成class="tags"。请记住，ID是UNIQUE（只有1），类不是。
我假设的这一行是你的#tags a定义：`display：none;'隐藏链接。不知道为什么会这样，但我删除了它。
我假设这不是用于帖子内容的整个div，只是底部的页脚栏。

我已经找到了解决方案，你可以在This Codepen看到它。现在，我无法访问为新闻标签等提供颜色的CSS样式。我使用column-count css属性和一些创意文本对齐。如果我正在做这个项目，那么不我将如何做到这一点，但它给出了一个看起来不太糟糕或者让我完全重写你的HTML和CSS的解决方案的最快方法。

如果您愿意，我可以为您重写HTML和CSS，并告诉您如何操作。

一般提示

当我必须处理CSS时，我遵循这个简单的规则：一次关注一件事。得到所有小事情要比第一次尝试编码整个页面容易得多。

修改

以下Another Codepen显示了我将如何处理这个问题，或多或少。没有制作整个网页。可能存在一些冲突的风格。你会看到我这样做是为了让第二篇帖子没有标签，至少在我的浏览器上它是否正确显示。

将项目放置在div的中心而不阻挡两侧的内容 - Tumblr

1 个答案:

一般提示

修改