gpt4 book ai didi

html - 如何仅使用一个 SPAN 向 CSS2 中的每一行添加填充(左和右)?棘手?

转载 作者:太空宇宙 更新时间:2023-11-03 20:21:57 24 4
gpt4 key购买 nike

我找不到解决这个问题的方法。

这是我想要的渲染图:
http://jsfiddle.net/kQSxb/

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="wrapper">
<div id="container">
<span>Lorem ipsum dolor sit amet,</span>
<span>consectetur adipisicing elit, sed</span>
<span>do eiusmod tempor incididunt.</span>
</div>
</div>
</body>
</html>

CSS:

#wrapper {
width: 600px;
height: 600px;
background-color: #eeeeee;
float: left;
}
#container {
width: 500px;
margin-top: 30px;
float: left;
}
#container span {
background-color: red;
padding-left: 20px;
padding-right: 20px;
font-size: 30px;
margin-bottom: 3px;
display: inline-block;
}

是否有可能只用一个 <span> 就可以得到这个精确的渲染(每行左右填充,每行之间的边距) (或 <p><div> )在 <div>#container 中?

我想在每一行的左边和右边添加填充。
因此,单词 consecteturdo 必须有左填充,而单词 ametsed(和点) 必须有正确的填充。

如果没有,是否可以使用 CSS3 或 jQuery hack 来做到这一点?

谢谢!

ps:不好意思大家,我说的不够清楚。我已经编辑了我的帖子。 :-/

最佳答案

您可以将填充添加到 #container 就完成了。

#container {
width: 260px;
margin-top: 30px;
float: left;
padding: 0 20px 0 20px;
}

参见:http://jsfiddle.net/M3SKj/1/

另外我认为,仅通过在容器元素上设置宽度来期望某些线制动器是相当不可靠的。只是我的 2 美分。

关于html - 如何仅使用一个 SPAN 向 CSS2 中的每一行添加填充(左和右)?棘手?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8385026/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com