html - ItemTemplate Repeater ASP.NET 内部的 Div 大小

Question

我有 3 个 div 标签，我想在一行中并排显示。

它们位于主 div 中:

<div class="dvItemContainer">
  <div class="nameContainer">content-1</div>
  <div class="quantityDiv">Content-2</div>
  <div class="dvLnkContainer">Content-3</div>
</div>

The classes are:

.dvItemContainer
{
    width:250px;
    float:right;
    cursor:pointer;
    overflow: hidden;
    max-width:250px;
}
.nameContainer
{
    width:150px;
    float:left;
    max-width:150px;
    overflow:hidden;
}
.quantityDiv
{
    width:60px;
    float:right;
}
.dvLnkContainer
{
    width:40px;
    float:right;
    right:0;
    visibility:visible;
}

此代码定义在用户控件内，我将其用作 Itemtemplate unside asp:Repeter 控件。

<ItemTemplate>
   <div style="width:100%; display:inline;" runat="server">
      <prod:ProductItemTagName ID="productItem" width="100%" runat="server" />
   </div>
</ItemTemplate

不知何故，这些 div 占了一整行。

例如它是这样显示的:

谢谢!

Answer 1

问题是 style="width:100%; display:inline;"从 <div style="width:100%; display:inline;" runat="server">div 默认是 display:block 元素所以你不需要给它 100% 的宽度如果您使用 display:inline 宽度将无效

所以用style="width:100%;display:inline-block"来改变它

display:inline-block 用于使这个 div 包裹 float 的 div我们给了它宽度，因为 display:inline-block 删除了默认宽度