Question

我做了一个看起来像这样的人：

  TRAVEL | BY JACK BLUE | OCTOBER 12, 2014 10:30 PM

无论如何，li数据之间的那些线是用border-right制作的，我有一张照片放在上面的li下面，现在我的问题是当我尝试将padding-bottom放到li上时li数据和img之间的空间，它也使你看到更长的边界，我希望它们的方式甚至与填充/空间;所以任何想法？

这是我的CSS代码：

.topicMenu ul {
    list-style: none;
    color: #969696;
    font-size: 0.6em;
    font-family: "Arial", Helvetica, sans-serif;
    text-transform: uppercase;
    margin: 0 0 0 95px;
    height: 5px;
}
.topicMenu li {
    float: left;
    padding: 0 10px 10px 10px;
    border-right: 1px solid #969696;
}

这是我的HTML代码：

<div class="topicMenu">
    <ul>
        <li style="padding-left: 0;"><a href="" class="ulink">Travel</a></li>
        <li><a href="">By Jack Blue</a></li>
        <li style="border-right: none;">October 12, 2014 10:30 pm</li>
    </ul>
</div>
<img src="images/nap-place.jpg" />

Answer 1

使用margin-bottom代替。这是一个小提琴：http://jsfiddle.net/m0nk3y/b9jojgrj/

.topicMenu li {
        float: left;
        padding: 0 10px;
        margin-bottom: 10px;
        border-right: 1px solid #969696;
    }

需要用CSS / padding-bottom / li进行评估

1 个答案: