HTML—；<；中的多个浮动块级元素；李>；_Html_Css_Block_Html Lists_Fixed Width

HTML—；<；中的多个浮动块级元素；李>；

html css

HTML—；<；中的多个浮动块级元素；李>；,html,css,block,html-lists,fixed-width,Html,Css,Block,Html Lists,Fixed Width,我有一个棘手的问题要处理。以下是场景：我有一个无序的列表，其中包含列表项。它们垂直显示，具有交替颜色的背景，所有背景都具有相同的宽度（以固定宽度div为界，向上数倍）。在某些项目上，有列表项目指示器（列表样式类型：方形；列表样式位置：内部；），但在大多数项目上没有。在这些列表项中，有三个浮动的s，它们都只包含文本。在列表项中，一个需要向左对齐，另两个需要向右对齐。第一个和右对齐的需要具有固定的宽度，以防止包含的文本流到下一行，或超出列表项的边界。另外两个也必须具有固定的宽度，因为除了特定于字体

我有一个棘手的问题要处理。以下是场景：

我有一个无序的列表，其中包含列表项。它们垂直显示，具有交替颜色的背景，所有背景都具有相同的宽度（以固定宽度div为界，向上数倍）。在某些项目上，有列表项目指示器（

列表样式类型：方形；列表样式位置：内部；

），但在大多数项目上没有。在这些列表项中，有三个浮动的

s，它们都只包含文本。在列表项中，一个需要向左对齐，另两个需要向右对齐。第一个和右对齐的

需要具有固定的宽度，以防止包含的文本流到下一行，或超出列表项的边界。另外两个也必须具有固定的宽度，因为除了特定于字体的浏览器呈现差异外，它们的内容的大小不会有太大变化

下面是一个简单的文本示例：

--------------------------------------
| • <Some Text>        <text2><text3>|
|   <Some more text>...<text2><text3>|
|   <other text>       <text2><text3>|
--------------------------------------

如果第一个文本不需要设置固定的宽度（我的布局已经是这样），那么一切都会非常简单，但它必须如此

下面是一个有效的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' lang='en' xml:lang='en'>
<head>

    <title>HTML List Problem</title>

    <style type="text/css">
        #container { width: 420px; }

        #container ul {
            list-style-type: none;
            margin: 0;
            padding: 0 20px;
            background: green;
        }

        .item { padding: 5px 0 4px 20px; }

        .item-current {
            list-style-type: square;
            list-style-position: inside;
        }

        .item-even { background: yellow; }
        .item-odd { background: orange; }

        .text1 {
            width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            float: left;
        }
        .text2, .text3 {
            float: right;
            width: 30px;
        }


    </style>

</head>

<body>

<div id="container">
    <ul>
        <li class="item item-current item-even">
            <div class="text1 item-current">
                Some Text
            </div>
            <div class="text2">
                text2
            </div>
            <div class="text3">
                text3
            </div>
        </li>
        <li class="item  item-odd">
            <div class="text1">
                Some Text
            </div>
            <div class="text2">
                text2
            </div>
            <div class="text3">
                text3
            </div>
        </li>
        <li class="item item-even">
            <div class="text1">
                Some Text
            </div>
            <div class="text2">
                text2
            </div>
            <div class="text3">
                text3
            </div>
        </li>
        <li class="item  item-odd">
            <div class="text1">
                Some Text
            </div>
            <div class="text2">
                text2
            </div>
            <div class="text3">
                text3
            </div>
        </li>
    </ul>
</div>

</body>
</html>


HTML列表问题
#容器{宽度：420px；}
#集装箱保险{
列表样式类型：无；
保证金：0；
填充：0 20px；
背景：绿色；
}
.item{padding:5px 0 4px 20px；}
.当前项目{
列表样式类型：方形；
列表样式位置：内部；
}
.item偶数{背景：黄色；}
.item奇数{背景：橙色；}
.text1{
宽度：200px；
溢出：隐藏；
文本溢出：省略号；
空白：nowrap；
浮动：左；
}
.text2、.text3{
浮动：对；
宽度：30px；
}


一些文本
文本2
文本3


一些文本
文本2
文本3


一些文本
文本2
文本3


一些文本
文本2
文本3

这个怎么样

HTML列表问题
#容器{宽度：420px；}
#集装箱保险{
列表样式类型：无；
保证金：0；
填充：0 20px；
背景：绿色；
}
.项目{
填充：5px 0 4px 20px；
列表样式类型：方形；
颜色：黄色；
}
.当前项目{
列表样式类型：方形；
}
.item偶数{背景：黄色；}
.item奇数{背景：橙色；}
.text1{
宽度：200px；
溢出：隐藏；
文本溢出：省略号；
空白：nowrap；
浮动：左；
}
.text2、.text3{
浮动：对；
宽度：30px；
}

一些文本文本2 文本3 一些文本文本2 文本3 一些文本文本2 文本3 一些文本文本2 文本3

我所改变的是：

删除了列表样式位置

添加了列表样式类型：方形和背景色（隐藏项目符号），您可能需要一些额外的标记来支持替代行颜色。这是不是太麻烦了？

解决方案是对子元素使用固定宽度，并稍微改变内容的结构。有些应该可以工作的事情是不可能在HTML中实现的，就像你想象的那样。以如此迂回的方式工作。。。太可怕了。

它肯定快到了。。。当然可以我希望我能得到更多的解释，比如如何防止

li

s崩溃，而不使用clearfix爆炸它们。如果我找不到合适的解决办法，我想我会用这个。但是，由于问题的性质，我认为这与浏览器在有列表项标记时与没有列表项标记时呈现的不同有关。问题是，在

中的所有元素上都有浮动会导致它没有高度（与其他没有clearfix的元素一样），仅添加clearfix会破坏将作为列表项的正确呈现，因为当它放置在内部时会清除项目指示器，而当它位于外部时，clearfix会将项目指示器向下推到下一个项目。这两个都不是可以接受的解决方案。为什么浮子不能占用空间？为什么我不能通过设置浮动的“高度”属性来选择是否指定浮动的高度？为什么？好消息是我已经解决了一半的问题：我现在可以强制浏览器接受屏幕的高度
<!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' lang='en' xml:lang='en'>
<head>

    <title>HTML List Problem</title>

    <style type="text/css">
        #container { width: 420px; }

        #container ul {
            list-style-type: none;
            margin: 0;
            padding: 0 20px;
            background: green;
        }

        .item { padding: 5px 0 4px 20px; }

        .item-current {
            list-style-type: square;
            list-style-position: inside;
        }

        .item-even { background: yellow; }
        .item-odd { background: orange; }

        .text1 {
            width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            float: left;
        }
        .text2, .text3 {
            float: right;
            width: 30px;
        }


    </style>

</head>

<body>

<div id="container">
    <ul>
        <li class="item item-current item-even">
            <div class="text1 item-current">
                Some Text
            </div>
            <div class="text2">
                text2
            </div>
            <div class="text3">
                text3
            </div>
        </li>
        <li class="item  item-odd">
            <div class="text1">
                Some Text
            </div>
            <div class="text2">
                text2
            </div>
            <div class="text3">
                text3
            </div>
        </li>
        <li class="item item-even">
            <div class="text1">
                Some Text
            </div>
            <div class="text2">
                text2
            </div>
            <div class="text3">
                text3
            </div>
        </li>
        <li class="item  item-odd">
            <div class="text1">
                Some Text
            </div>
            <div class="text2">
                text2
            </div>
            <div class="text3">
                text3
            </div>
        </li>
    </ul>
</div>

</body>
</html>

<title>HTML List Problem</title> 

<style type="text/css"> 
    #container { width: 420px; }

    #container ul {
        list-style-type: none;
        margin: 0;
        padding: 0 20px;
        background: green;
    }

    .item {
     padding: 5px 0 4px 20px;
         list-style-type: square;
         color: yellow;
}

    .item-current {
        list-style-type: square;

    }

    .item-even { background: yellow; }
    .item-odd { background: orange; }

    .text1 {
        width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        float: left;
    }
    .text2, .text3 {
        float: right;
        width: 30px;
    }


</style>