Fatal编程技术网
  • html/
  • Html CSS在跨距中固定宽度

Html CSS在跨距中固定宽度

html css

Html CSS在跨距中固定宽度,html,css,Html,Css,在无序列表中： <li><span></span> The lazy dog.</li> <li><span>AND</span> The lazy cat.</li> <li><span>OR</span> The active goldfish.</li> <li><pre> The lazy dog.</pre

在无序列表中：

<li><span></span> The lazy dog.</li>
<li><span>AND</span> The lazy cat.</li>
<li><span>OR</span> The active goldfish.</li>

<li><pre>    The lazy dog.</pre></li>
<li><pre>AND The lazy cat.</pre></li>
<li><pre>OR  The active goldfish.</pre></li>
“或”的理由并不重要

懒惰动物文本可能被包装在一个附加元素中，但我必须仔细检查。

ul{
列表样式类型：无；
左侧填充：0px；
}
李斯潘{
浮动：左；
宽度：40px；
}
    

  • 懒狗
    • 

  • 还有那只懒猫
    • 

  • 或者是活跃的金鱼
    •
不幸的是，内联元素（或具有display:inline的元素）忽略了width属性。您应该改用浮动div：

<style type="text/css">
div.f1 { float: left; width: 20px; }
div.f2 { float: left; }
div.f3 { clear: both; }
</style>

<div class="f1"></div><div class="f2">The Lazy dog</div><div class="f3"></div>
<div class="f1">AND</div><div class="f2">The Lazy cat</div><div class="f3"></div>
<div class="f1">OR</div><div class="f2">The active goldfish</div><div class="f3"></div>


div.f1{浮点：左；宽度：20px；}
div.f2{float:left；}
div.f3{清除：两个；}
懒狗
那只懒猫呢
活金鱼
现在我看到您需要使用跨距和列表，所以我们需要稍微重写一下：

<html><head>
<style type="text/css">
        span.f1 { display: block; float: left; clear: left; width: 60px; }
    li { list-style-type: none; }
    </style>

</head><body>
<ul>
<li><span class="f1">&nbsp;</span>The lazy dog.</li>
<li><span class="f1">AND</span> The lazy cat.</li>
<li><span class="f1">OR</span> The active goldfish.</li>
</ul>
</body>
</html>


span.f1{显示：块；浮动：左；清除：左；宽度：60px；}
li{列表样式类型：无；}

    

  • 懒狗
    • 

  • 还有那只懒猫
    • 

  • 或者是活跃的金鱼
    •
您可以使用表来完成，但它不是纯CSS

<style>
ul{
    text-indent: 40px;
}

li{
    list-style-type: none;
    padding: 0;
}

span{
    color: #ff0000;
    position: relative;
    left: -40px;
}
</style>


<ul>
<span></span><li>The lazy dog.</li>
<span>AND</span><li>The lazy cat.</li>
<span>OR</span><li>The active goldfish.</li>
</ul>


保险商实验室{
文本缩进：40px；
}
李{
列表样式类型：无；
填充：0；
}
跨度{
颜色：#ff0000；
位置：相对位置；
左：-40px；
}

    

  • 懒狗
    • 
还有那只懒猫
或者是活跃的金鱼
请注意，它并不像您所希望的那样显示，因为它会在每个选项上切换行。但是，我希望这能帮助您更接近答案。

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

因此：

span{width:50px；display:block；}
然后：

<li><span>&nbsp;</span>something</li>
<li><span>AND</span>something else</li>
什么
  • 还有别的吗
    • 在理想情况下，只需使用以下css即可实现这一点

    <style type="text/css">

span {
  display: inline-block;
  width: 50px;
}

</style>

    
跨度{
显示：内联块；
宽度：50px；
}
    这适用于除FF2及以下版本之外的所有浏览器

    Firefox2及更低版本不支持此功能 价值您可以使用-moz内联框， 但请注意，这与 内联块，它可能无法作为 在某些情况下，你会期待

    引用自

    嗯，暴力手段总是有的：

    懒狗
  • 还有那只懒猫
  • 或者是活跃的金鱼
    • 或者这就是你所说的“填充”文本的意思？在这种情况下，这是一项模棱两可的工作

    这听起来像是一个家庭作业问题。我希望你不是想让我们帮你做作业吧？

    在这种情况下，人span不能是块元素，因为li元素之间的其余文本将被删除。使用float也是一个非常糟糕的主意，因为您需要为整个li元素设置宽度，并且这个宽度需要和整个ul元素或其他容器的宽度相同

    在html中尝试以下操作：

    > <span class="input-group-addon" style="padding-left:6%;
> padding-right:6%; width:150px; overflow: auto;">
    因此，当li元素是相对元素时，您将span元素设置为绝对元素且位于顶部：0；左：0；所以它保持在左上角，您可以设置padding left（或：padding:0px 0px 0px 80px；）来为span元素设置此可用空间

    对于简单的情况，它应该工作得更好。

    
跨度{
位置：绝对位置；
宽度：50px；
}
    您可以使用此方法为内联元素指定宽度

    >

    ul{
列表样式类型：无；
左侧填充：0px；
}
ul li span{
浮动：左；
宽度：40px；
}
      

    • 懒狗
      • 

    • 还有那只懒猫
      • 

    • 或者是活跃的金鱼
      •
    使用HTML5.0，可以使用
    或
    固定文本块的宽度

    对于
    ，重要的是添加以下CCS行

    对于空的
    来说，重要的是添加
    空间

    我的代码如下

    正文
{
字体系列：Arial；
字体大小：20px；
}
div
{
宽度：200px；
字号：80px；
背景色：石灰；
}
分区跨度
{
显示：块；
宽度：200px；
背景色：石灰；
}
李斯潘
{
显示：内联块；
宽度：80px；
背景颜色：黄色；
}
span.tab
{
显示：内联块；
宽度：80px；
背景颜色：黄色；
}
    DIV
ABCDEF
跨度
ABCDEF

    默认情况下是一个内联元素-浮动它不会给它一个宽度。float属性生成一个“block box”，它确实有一个宽度。它应该是
    diplay:inline block；宽度：32px在大多数现代浏览器中都适用。@Randy Marsh-不，只有当float属性将元素更改为块显示时，width属性才会起作用，正如Stephen Caldwell在上文中所描述的那样。@PauloBueno您可以将
    diplay
    更改为read
    display
    ，顺便说一句，它对我有效。谢谢，这是一个很好的解决方案。浮动div在水平排列时模拟跨度的预期行为。记住这一点很重要：两条线都断了。在这种情况下，这是避免使用表的一个很好的方法。我不明白，按钮是内联或内联块元素，为什么“宽度”会应用于它？按钮看起来像一个内联元素，对吗？是否有任何文档显示所有html元素的默认“显示”属性？@NicholasPickering。。那PDF呢？嗯，不确定。这只是一个小小的挫折。最终不得不使用表格来获得想要的效果。如果你需要符合CSS3标准的东西，我可以推荐wkhtmltopdf。同时，10年后，这绝对是一条路。不，我认为这行不通。“某物”转到下一行。还有一个缺失的“正如我所说的，它不起作用！请检查。而且，干涉所有跨元素的CSS从来都不是一件好事！

    <li><pre>    The lazy dog.</pre></li>
<li><pre>AND The lazy cat.</pre></li>
<li><pre>OR  The active goldfish.</pre></li>

    

    <li><span></span><strong>The</strong> lazy dog.</li>
<li><span>AND</span> <strong>The</strong> lazy cat.</li>
<li><span>OR</span>  <strong>The</strong> active goldfish.</li>

    

    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

    

    <style type="text/css">

span {
  position:absolute;
  width: 50px;
}

</style>

    

    > <span class="input-group-addon" style="padding-left:6%;
> padding-right:6%; width:150px; overflow: auto;">

    

    display: inline-block;