錶行寬度正在改變，以匹配不在表格行內的元素

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

下面是我將如何處理這個問題。你的標記是好的，不需要改變。

首先，我會將display: table應用於子div，並讓p元素爲常規塊或內聯塊（取決於您的設計）。

您現在可以將第一個表格單元元素（span）的寬度設置爲1％，並獲得您需要的縮小到適合的寬度。

在您的原始CSS中，p元素由匿名錶格單元格和表格行元素包裝。最終結果是第一個表格單元列的寬度由文本的寬度決定，而不是圖標的寬度。

/*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; 
 
}

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

Answer 2

試試這個：

/*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 3

，我建議你到你p標籤放在外面.fieldset。所以它不會在顯示屏上顯示：表。我覺得很有道理不把塊元素在表根級別像

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

通過移動p你外面將刪除的影響是p事業顯示你的元素：表細胞

Demo

或更改你的CSS，所以顯示：塊元素不會內顯示：表元素