Question

我正在使用CSS网格布局，并且很难尝试使TextBox填充它所在的div容器。它似乎适用于某些控件，如GridView / GoogleMap，但是当我尝试使用TextBox它只填充一列的宽度，即使div填满3-4列。

这是我的网格容器示例CSS以及我用来填充所有列的内容

.grid-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    -ms-grid-columns: repeat(2, 1fr);
    grid-gap: 1em;
}

@media (min-width: 52em) {
    .grid-container {
        width: 95%;
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
        -ms-grid-columns: repeat(auto-fit, minmax(20em, 1fr));
        grid-gap: 1em;
    }
}

.item-max-columns {
  grid-column: 1 / -1;
  background-color: aqua;
}

此GooleMap控件可在填充屏幕的所有列中正确显示（GridViews也能正确显示）

<div class="item-max-columns">
    <map:GoogleMap ID="JobMap" Width="100%" runat="server" DefaultAddress="Edmonton, Alberta"></map:GoogleMap>
    <map:GoogleMarkers ID="JobMapMarkers" TargetControlID="JobMap" runat="server"></map:GoogleMarkers>
</div>

但是，当我尝试插入宽度为100％的TextBox时，它只填充一列

<div class="item-max-columns">
    Project Description
    <asp:TextBox ID="txtProjectDescription" runat="server" Enabled="true" TextMode="MultiLine" Width="100%"></asp:TextBox>
</div>

这是JSFiddle的链接，它使用输入字段而不是TextBox重现问题。我希望输入字段/ TextBox跨越整个div标签，而不仅仅是第一列。

https://jsfiddle.net/zuvdx2xn/

CSS Width Issue

Answer 1

我能够通过更新CSS来包含

来实现这一点

.textbox{
    width: calc(100% - 2em);
}

并输入/文本框控件到

<input type="text" id="txtVal2" class="textbox" style="max-width: 100%;" />

.grid-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    -ms-grid-columns: repeat(2, 1fr);
    grid-gap: 1em;
}

.textbox{
    width: calc(100% - 2em);
}

@media (min-width: 52em) {
    .grid-container {
        width: 95%;
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
        -ms-grid-columns: repeat(auto-fit, minmax(20em, 1fr));
        grid-gap: 1em;
    }
    .textbox{
      width: calc(100% - 2em);
    }
}

.item-max-columns {
  grid-column: 1 / -1;
  background-color: aqua;
}

<section class="grid-container">
  <div class="item-max-columns">
    <p>Project Description</p>
    <input type="text" id="txtVal2" class="textbox" style="max-width: 100%;" />  
  </div>
  <div class="item-max-columns">
    <p>Instructions</p>
    <input type="text" id="txtVal2" class="textbox" style="max-width: 100%;" />  
   </div>
</section>

CSS网格布局TextBox不跨越多列

1 个答案: