Question

我正在创建包含少量文本的元素，我希望每个元素都是文本的大小+一些填充

cursor: pointer;
  padding: 10px 25px;
  background-color: #323232;
  color: #FFF;
  margin-top: 5px;
  border-radius: 2px;
  font-size: 1.1rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  font-weight: 300;
  min-height: 48px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);

只有在有一个元素时才能正常工作。但是，如果有2个或更多元素，它们都会调整到我不想要的最大元素的宽度。

https://jsfiddle.net/zbrmLdwv/

Answer 1

在你的CSS中，添加：

float:left;
clear:left;

这会使元素“shrinkwrap”，因此它会自动包装文本。

JS Fiddle

Answer 2

您遇到的width问题可能是由于display属性造成的。请添加

p{ display: inline-block }

用正确的元素选择器替换p，并检查问题是否已解决。

CSS动态添加的元素匹配内容大小

2 个答案: