css strong width,CSS固定宽度在一个范围内

回答(9)

3 years ago

ul {

list-style-type: none;

padding-left: 0px;

}

ul li span {

float: left;

width: 40px;

}

• The lazy dog.
• AND The lazy cat.
• OR The active goldfish.

就像Eoin所说的那样，你需要在你的“空” Span 中放置一个不间断的空间，但你不能为内联元素指定宽度，只能为填充/边距分配，所以你需要让它浮动以便你可以给它一个宽度 .

3 years ago

在一个理想的世界中，你只需使用以下css即可实现这一目标

span {

display: inline-block;

width: 50px;

}

这适用于除FF2及以下版本之外的所有浏览器 .

Firefox 2及更低版本不支持此值 . 您可以使用-moz-inline-box，但请注意它与inline-block不同，并且在某些情况下可能无法正常工作 .

3 years ago

不幸的是，内联元素(或具有display：inline的元素)忽略width属性 . 你应该使用浮动div：

div.f1 { float: left; width: 20px; }

div.f2 { float: left; }

div.f3 { clear: both; }

The Lazy dog

AND

The Lazy cat

OR

The active goldfish

现在我看到你需要使用 Span 和列表，所以我们需要重写一下：

span.f1 { display: block; float: left; clear: left; width: 60px; }

li { list-style-type: none; }

•  The lazy dog.
• AND The lazy cat.
• OR The active goldfish.

3 years ago

标记需要设置为 display:block ，因为它是内联元素并将忽略宽度 .

所以：

然后：

 something ANDsomething else

3 years ago

span {

position:absolute;

width: 50px;

}

您可以使用此方法为内联元素指定宽度

3 years ago

在这种情况下，人们不能成为块元素，因为li元素之间的其他文本将会关闭 . 使用float也是一个非常糟糕的主意，因为你需要为整个li元素设置宽度，这个宽度需要与整个ul元素或其他容器的宽度相同 .

在html中尝试这样的事情：

The lazy dog. AND The lazy cat. OR The active goldfish.

并在CSS中

li {position:relative;padding-left:80px;} // 80px or something else

li span {position:absolute;top:0;left:0;}

li strong {color:red;} // red or else

所以，当li元素是相对的时，你将span元素格式化为绝对的并且在顶部：0; left：0;所以它保持左上角你设置padding-left(或：padding：0px 0px 0px 80px;)来为span元素设置这个空闲空间 .

对于简单的情况，它应该更好 .

3 years ago

您可以使用表格来完成它，但它不是纯粹的CSS .

ul{

text-indent: 40px;

}

li{

list-style-type: none;

padding: 0;

}

span{

color: #ff0000;

position: relative;

left: -40px;

}

• The lazy dog.

AND

The lazy cat.

OR

The active goldfish.

请注意，它不会完全按照您的需要显示，因为它会在每个选项上切换一行 . 但是，我希望这可以帮助您更接近答案 .

3 years ago

好吧，总有蛮力方法：

    The lazy dog.

AND The lazy cat.

OR  The active goldfish.

或者这就是“填充”文本的意思？在这种情况下，这是一项模棱两可的工作 .

这听起来有点像家庭作业问题 . 我希望你不是想让我们为你做功课吗？

3 years ago

试试这个

>