Question

我使用带有日历扩展名（cal）的TYPO3。它创建事件并将其显示为列表。目前，它看起来像：

现在我希望在日期周围有一个边框，但是和文本一样大。

这是扩展程序的模板：

<div class="col-md-3 text-center" style="text-align:center;">
    <div class="event-wrapper">
        <div class="img-wrapper">
            <div class="date-wrapper">
                <div class="date" title="###MICROFORMAT_START###" class="dtstart"><span class="borderspan">###STARTDATE###</span></div>
            </div>
            <div class="image">###IMAGE###</div>
        </div>
        <div class="text-wrapper">
            <div class="time">###STARTTIME######ENDTIME###</div>
            <h3><!-- ###EVENT_LINK### start-->###TITLE###<!-- ###EVENT_LINK### end--></h3>
            <p>###DESCRIPTION###</p>
        </div>
    </div>
</div>

Div with class＆＃34; date＆＃34;是相关部分。

此模板创建此代码：

    <div class="col-md-3 text-center" style="text-align:center">
        <div class="event-wrapper">
            <div class="img-wrapper">
                <div class="date-wrapper">
                    <div class="date" title="20170118T210000" class="dtstart"><span class="borderspan">
<div class="day">18.</div>
<div class="month">Januar</div></span>
</div>
                </div>
                <div class="image"></div>
            </div>
            <div class="text-wrapper">
                <div class="time">21:00 Uhr - 23:00 Uhr</div>
                <h3>Frankfurt/Main</h3>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takim</p>
            </div>
        </div>
    </div>

我试图给班级＆＃34; borderpan＆＃34;边界，但这并没有起作用，之后看起来像这样：

如何在日期周围设置边框？

Answer 1

您可以尝试使用Vue和::before，如下所示：

＆＃13;

::after

＆＃13;

.date-wrapper {
  max-width: 200px;
  background: orange;
  text-align: center;
}

.date::before,
.date::after {
  content: "";
  width: 1px;
  height: 25px;
  background: black;
  display: block;
  margin: 0 auto;
}

.date {
  margin: 25px 0;
}

＆＃13;

另请注意（如@Banzay所述）每个元素不要使用<div class="date-wrapper"> <div class="date" title="###MICROFORMAT_START###"> <span class="borderspan">###STARTDATE###</span> </div> </div>两次。

Answer 2

您的日期是＆lt; div＆gt; element默认为块元素。意味着占用整个宽度。我们需要使其成为内联块，因此宽度将与内容相关。另外添加一些填充以在文本和边框之间留出一些空间。我将边框宽度设置为等于文本行宽度和颜色以匹配文本颜色。看看：

.date {
  display: inline-block;
  padding: 7px;
  border: 7px solid #ea644f;
}

CSS边界约2个div

2 个答案: