时间戳

首页 > 解决方案 > 使 div 的宽度为其内容宽度的两倍

html - 使 div 的宽度为其内容宽度的两倍

问题描述

例如，HTML：

<div style="top:0;">January</div>
<div style="top:30px;">February</div>
<div style="top:60px;">March</div>

CSS：

div{
    position:absolute;
    border-bottom: 1px solid black;
}

我想在内容之前和之后添加原始内容宽度的一半，这样我就可以将每个 div 的宽度加倍。

效果是这样的，解决方法是手动一一插入内联块： https ://jsfiddle.net/vj25udLy/13/

如果我可以直接将宽度设置为其内容宽度的 200% 或其他比例，那么这项工作似乎更简单、更灵活。

如果没有纯 CSS 解决方案，欢迎使用 JS/jQuery 解决方案。

标签： htmlcss

解决方案

一个技巧是对内容使用数据属性，然后将其添加到两个伪元素中（现在您有 2 倍的内容），然后隐藏一个并将另一个居中：

.element {
 display:inline-block;
 margin:20px;
 border-bottom:1px solid;
}
.element:before,
.element:after {
  content:attr(data-text);
}
.element:before {
    visibility:hidden;
}
.element:after {
  display:inline-block;
  transform:translate(-50%);
}
<div class="element" data-text="January"></div>
<div class="element" data-text="February"></div>
<div class="element" data-text="March"></div>
<div class="element" data-text="aaaaaaaaaaaaaaaa"></div>
<div class="element" data-text="bb"></div>

如果您只想实现边框，另一个想法是使用伪元素并使其宽度为 200%（或left:-50%和right:-50%）：

body {
  text-align:center;
}
.element {
 display:inline-block;
 margin:20px;
 position:relative;
}
.element:after {
  content:"";
  position:absolute;
  left:-50%;
  right:-50%;
  bottom:0;
  height:1px;
  background:#000;
}
<div class="element">January</div>
<br>
<div class="element">February</div>
<br>
<div class="element">March</div>
<br>
<div class="element">aaaaaaaaaaaaaaaa</div>
<br>
<div class="element">bb</div>

推荐阅读