Html 用最左边的浮动子元素填充块元素（浮动：右）

我需要用他最左边的孩子（三个孩子中的一个）填充一个宽度元素。这三个孩子的格式是

display:inline块；浮动：右

我迄今为止取得的成就：

我期望达到的目标：

显然，

width:66%

无论如何都没有帮助。此外，100%宽度也不起作用

我在stackoverflow上发现了这一点，但我需要一些纯CSS制作的东西，没有JS、jQuery等。而且，使用表对我来说不是一个解决方案

如果HTML代码对此有帮助：

<style type="text/css">
    div {
        width: 200px;
        border: 1px solid red;
    }
    ul {
        padding: 0px 0px 0px 20px;
        margin: 0px;
    }
    li {
        display: block;
        white-space: nowrap;
        list-style-type: none;
        display: block;
        height: 20px;
        padding: 0px;
        margin: 1px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;

        border-color: #D5AB55 #C93 #C93 #D5AB55;
        background-color: #F3CE00;
    }

    .name {
        display: inline-block;
        float: right;
        height: 18px;
        width: 65%;
        margin: 0px;
        padding: 0px 2px;
        border: 1px solid grey;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
    }
    .save, .cancel {
        display: inline-block;
        float: right;
        height: 20px;
        width: 20px;
        margin: 0px 0px 0px 1px;
        padding: 0px;
        border: 1px solid grey;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
    }
    .save   { background: url(../images/confirm.png) no-repeat center center; }
    .cancel { background: url(../images/cancel.png) no-repeat center center; }
</style>

<div>
    <ul>
        <li>
            <input type="button" value="" class="cancel">
            <input type="button" value="" class="save">
            <input type="text" value="Big list item" class="name">
        </li>
        <ul>
            <li id="category_2" id_category="2">
                <input type="button" value="" class="cancel">
                <input type="button" value="" class="save">
                <input type="text" value="Medium list item" class="name">
            </li>
            <ul>
                <li>
                    <input type="button" value="" class="cancel">
                    <input type="button" value="" class="save">
                    <input type="text" value="1st small item" class="name">
                </li>
                <li>
                    <input type="button" value="" class="cancel">
                    <input type="button" value="" class="save">
                    <input type="text" value="2nd small item" class="name">
                </li>
                <li>
                    <input type="button" value="" class="cancel">
                    <input type="button" value="" class="save">
                    <input type="text" value="3rd small item" class="name">
                </li>
            </ul>
        </ul>
    </ul>
</div>

div{
宽度：200px；
边框：1px纯红；
}
保险商实验室{
填充：0px 0px 0px 20px；
边际：0px；
}
李{
显示：块；
空白：nowrap；
列表样式类型：无；
显示：块；
高度：20px；
填充：0px；
保证金：1px；
-moz边界半径：3px；
-webkit边界半径：3px；
边界半径：3px；
边框颜色：D5AB55#C93#C93#D5AB55；
背景色：#F3CE00；
}
.姓名{
显示：内联块；
浮动：对；
高度：18px；
宽度：65%；
边际：0px；
填充：0px 2px；
边框：1px纯灰；
-moz边界半径：3px；
-webkit边界半径：3px；
边界半径：3px；
}
.保存，.取消{
显示：内联块；
浮动：对；
高度：20px；
宽度：20px；
保证金：0px 0px 0px 1px；
填充：0px；
边框：1px纯灰；
-moz边界半径：3px；
-webkit边界半径：3px；
边界半径：3px；
}
.save{background:url（../images/confirm.png）无重复中心；}
.cancel{background:url（../images/cancel.png）无重复中心；}

谢谢你抽出时间

---

SYNCRo，

试试这个：只需添加另一个具有其他宽度的类

HTML:

---

将无效HTML（如问题注释中所述，

li

以外的任何元素都不是

ul

或

ol

的有效子元素，包括这些元素本身）更正为以下内容：

<div>
    <ul>
        <li class="items">
            <input type="button" value="" class="cancel" />
            <input type="button" value="" class="save" />
            <input type="text" value="Big list item" class="name" />
        </li>
        <li>
        <ul>
            <li id="category_2" id_category="2" class="items">
                <input type="button" value="" class="cancel" />
                <input type="button" value="" class="save" />
                <input type="text" value="Medium list item" class="name" />
            </li>
            <li>
            <ul>
                <li class="items">
                    <input type="button" value="" class="cancel" />
                    <input type="button" value="" class="save" />
                    <input type="text" value="1st small item" class="name" />
                </li>
                <li class="items">
                    <input type="button" value="" class="cancel" />
                    <input type="button" value="" class="save" />
                    <input type="text" value="2nd small item" class="name" />
                </li>
                <li class="items">
                    <input type="button" value="" class="cancel" />
                    <input type="button" value="" class="save" />
                    <input type="text" value="3rd small item" class="name" />
                </li>
            </ul>
            </li>
        </ul>
        </li>
    </ul>
</div>

这使用CSS

calc（）

函数来确定

输入

元素的宽度作为计算

要与旧浏览器兼容，您可以使用绝对（对于

.save

和

.cancel

元素）和相对（对于

li

元素）定位：

li {
    width: 80%;
    clear: both;
    float: right;
    margin: 0 0 0.2em 0;
    position: relative;
}

li.items {
    background-color: #f90;
    padding: 0 45px 0 0;
}

li .save, li .cancel {
    position: absolute;
    width: 20px;
    height: 20px;
}

.save {
    top: 0;
    right: 21px;
}

.cancel {
    top: 0;
    right: 0;
}

input.name {
    width: 100%;
}

您会注意到，

填充

当然会添加到

li

元素的宽度中，因此您可能希望添加

框大小

CSS属性来补偿：

/* all other CSS remains untouched */
li {
    width: 80%;
    clear: both;
    float: right;
    margin: 0 0 0.2em 0;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

参考资料：

---

很抱歉，如果我将div的宽度更改为300px，我将不得不重新计算所有百分比。在我的例子中，我只有三种类型的列表项。事实上，我永远不会知道列表的真正深度。你意识到你的HTML是无效的，对吗？

ul

（或

ol

）的唯一有效子元素是

li

元素：将

ul

直接嵌套在另一个

ul

中不是有效的HTML（它们需要包含在父

li

标记中）。非常感谢您的回答。给我一点时间把它翻个底朝天，我会把你的答案定为可以接受的答案。再次感谢。是的，看起来无效的

• 树将影响我的最终布局。别这么想，罗拉，你真的很受欢迎，希望能对你有所帮助！=）

  li {
      width: 80%;
      clear: both;
      float: right;
      margin: 0 0 0.2em 0;
  }
  
  li.items {
      background-color: #f90;
  }
  
  li .save, li .cancel {
      float: right;
      width: 20px;
      height: 20px;
  }
  
  input.name {
      width: -webkit-calc(100% - 45px);
      width: -moz-calc(100% - 45px);
      width: -o-calc(100% - 45px);
      width: -ms-calc(100% - 45px);
      width: calc(100% - 45px);
  }
  

  li {
      width: 80%;
      clear: both;
      float: right;
      margin: 0 0 0.2em 0;
      position: relative;
  }
  
  li.items {
      background-color: #f90;
      padding: 0 45px 0 0;
  }
  
  li .save, li .cancel {
      position: absolute;
      width: 20px;
      height: 20px;
  }
  
  .save {
      top: 0;
      right: 21px;
  }
  
  .cancel {
      top: 0;
      right: 0;
  }
  
  input.name {
      width: 100%;
  }
  

  /* all other CSS remains untouched */
  li {
      width: 80%;
      clear: both;
      float: right;
      margin: 0 0 0.2em 0;
      position: relative;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
      -o-box-sizing: border-box;
      box-sizing: border-box;
  }