表行宽度正在更改以匹配不在表行内的元素

Question

对于左侧带有图标的输入，我有以下HTML结构。

           <div class="fieldset">
                <p>Normal Input</p>
                <div>
                    <span><i class="icon-cart"></i></span>
                    <input name="">
                </div>
            </div>

我正在使用display:table属性将结构设置为所需的布局样式，如下图所示：

然而，图标（<span>）正在根据其上方的标题（<p>）拉伸其宽度，如下图所示：

以下是当前使用的CSS：

/*Fieldsets*/
.fieldset {
    width: 100%;
    display: table;
  position: relative;
  white-space: nowrap;
  margin-bottom: 15px;
}

.fieldset:last-of-type {
    margin-bottom: 0;
}

        /*Fieldsets > Labels*/
        .fieldset > p { 
            width: 1%;
            margin-bottom: 3px;
        }  

        /*Fieldsets > Input Container*/
        .fieldset > div {
            display: table-row;
            position: relative;
        }  

            .fieldset > div > * {
                display: table-cell;
              white-space: nowrap;
              vertical-align: middle;
                position: relative;
            }  

            /*Fieldsets > Input + Icon*/
            .fieldset > div > span {
                border: 1px solid #B0C2CE;
                padding: 5px 15px;
                font-weight: bold;
                width: 1%;
            }  

            /*Fieldsets > Input + Icon Senarios*/
            .fieldset > div > span:first-of-type {
                border-right: 0;
                border-radius: 4px 0 0 4px;
            } 

            .fieldset > div > span:not(:only-of-type) + input {
                border-radius: 0;
            }

            .fieldset > div > input + span {
                border-left: 0;
                border-radius: 0 4px 4px 0;
            }  

            .fieldset > div > span + input,
            .fieldset > div > span + textarea,
            .fieldset > div > span + select,
            .fieldset > div > span + .select-dropdown-single .select-dropdown-input,
            .fieldset > div > span + .select-dropdown-multi .select-input {
                border-radius: 0 4px 4px 0;
            }

            /*Fieldsets > Input + Help ToolTip Icon*/
            .fieldset > div [class^="tooltip-"],
            .fieldset > div [class*=" tooltip-"] {
                text-align: center;
                width: 30px;
            } 

如何根据上面的<p>停止图标宽度变化？，它甚至不包含在同一个Div中。

Answer 1

试试这个：

/*Fieldsets > Input + Icon*/
.fieldset > div > span {
    border: 1px solid #B0C2CE;
    padding: 5px 15px;
    font-weight: bold;
    width: 10px; // This will set the width
    display:inline-block; // Add this and width will work.
}  

Answer 2

我建议您将 p 标记放在 .fieldset 之外。所以它不会与 display：table 一块。我认为不将块元素放在表根级别（如

）是有意义的

<table>
  <p></p>
  <tr>
     <td></td>
  </tr>
</table>

将 p 移到外面，您将使用 display删除 p 对元素造成的影响：table-cell

Demo

或者更改你的css，所以 display：block 元素不在 display：table 元素

中

Answer 3

以下是我将如何处理这个问题。您的加价很好，无需更改。

首先，我会将display: table应用于子div，并让p元素成为常规块或内联块（取决于您的设计）。

现在，您可以将第一个表格单元格元素（span）的宽度设置为1％，并获得所需的缩小到适合宽度。

在原始CSS中，p元素被匿名表格单元格和表格行元素包装。最终结果是第一个表格单元格列的宽度由p文本的宽度决定，而不是图标的宽度。

＆＃13;

＆＃13;

/*Fieldsets*/

.fieldset {
  width: 100%;
  margin-bottom: 15px;
  border: 1px dotted blue;
}
.fieldset:last-of-type {
  margin-bottom: 0;
}
/*Fieldsets > Labels*/

.fieldset > p {
  display: inline-block;
  margin-bottom: 3px;
  border: 1px dotted gray;
}
/*Fieldsets > Input Container*/

.fieldset > div {
  display: table;
}
.fieldset > div > * {
  display: table-cell;
  white-space: nowrap;
  vertical-align: middle;
  position: relative;
}
/*Fieldsets > Input + Icon*/

.fieldset > div > span {
  border: 1px solid #B0C2CE;
  padding: 5px 15px;
  font-weight: bold;
  width: 1%;
}
/*Fieldsets > Input + Icon Senarios*/

.fieldset > div > span:first-of-type {
  border-right: 0;
  border-radius: 4px 0 0 4px;
}
.fieldset > div > span + input {
  border-radius: 2px;
  width: auto;
}
.fieldset > div > input + span {
  border-left: 0;
  border-radius: 0 4px 4px 0;
}
.fieldset > div > span + input,
.fieldset > div > span + textarea,
.fieldset > div > span + select,
.fieldset > div > span + .select-dropdown-single .select-dropdown-input,
.fieldset > div > span + .select-dropdown-multi .select-input {
  border-radius: 0 4px 4px 0;
}
/*Fieldsets > Input + Help ToolTip Icon*/

.fieldset > div [class^="tooltip-"],
.fieldset > div [class*=" tooltip-"] {
  text-align: center;
  width: 30px;
}

＆＃13;

<div class="fieldset">
  <p>Normal Input</p>
  <div>
    <span><i class="icon-cart">Icon</i></span>
    <input name="">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;