Question

对于日历应用，我想让熟悉的月份名称以左边的左箭头为中心返回一个月，右边缘的右箭头一个月前进。像< May >

这样的东西

<Div>在最后插入换行符，所以我想我会使用span，除了span是一个内联元素，这样text-align: center属性只能在月份的长度内对齐它。只需使用text-align: center即可生成类似<May >

的内容

为了弥补这一点，我在跨度中添加了display: block，但是，这会在结尾处创建一个换行符，即

<     May
              >

有人可以建议一个正确的方法吗？

上一个版本：

CSS / HTML：

span.previous {
     float:left;
}
span.next {
     float:right;    
}
span.month {
     display:block;
     text-align:center;
}

<span class="previous"><img src="leftarrow.gif"></span>
<span class = "month">May</span>
<span class="next"><img src="rightarrow.gif"></span>

Answer 1

您需要将text-align应用于容器元素，并删除display:block（text-align与内联/内联块元素一起使用）。并且不要忘记清除容器后面的浮子。

fiddle

Answer 2

设计日历标题的一种方法可能如下。在我的示例（this fiddle）中，我使用了星号而不是图像。我替换了段落的月份跨度并更改了标记的顺序。

星号或图像将以灵活的设计保留在两侧和月中。请参阅此fiddle。

#header {
    background:#e0e0e0;
}
span.previous {
    float:left;
}
span.next {
    float:right;    
}
p.month {
    text-align:center;
}

<div id="header">
    <span class="previous">**</span>
    <span class="next">**</span>
    <p class = "month">May</p>
</div>

CSS：在span中使用text-align：center

2 个答案: