html - 每行独立的文本块

Question

我刚开始玩 html 和 css，基本上我一直在从这里的所有帖子中学习一切，但现在我被一些我似乎无法通过研究弄清楚如何去做的事情困住了，并决定发布一个问题帮助。

我正在 tumblr 上自定义一个简单的投资组合风格主题，我的问题是关于图片右侧的文字标题

http://www.alvaserigrafia.pt/post/34608701054

我只能让 3 个文本行显示在一个块上，我希望每一行都有自己的块，宽度成比例。这可以只用 html 和 css 来完成吗？

提前致谢！

Answer 1

这就是 Firebug（Firefox 扩展）或您最喜欢的浏览器的开发人员工具将派上用场的地方。如果您检查有问题的文本元素，您会发现它们都包含在<p>标签中。

<p>标签是块级元素，这意味着它将自动占据其父级的整个宽度。这也是推荐用于...嗯...文本段落的内容。

Answer 2

每行都包含在一个p元素中。块级元素通常填满父容器的整个宽度；这就是为什么它们是“块”元素。

要获得随内容缩小的内容，请将文本包装在 a 中span：

<p><span>text</span></p>

span只会和里面的文字一样大。