转发器控件中的 CSS 样式

Question

嗨， friend 们，我正在努力让我的转发器看起来像我附加的 img。我已经达到了 Total cover 这条线，但是 50% 的总覆盖线让我在对齐时很头疼。有人可以指导我吗

 <asp:Repeater ID="TreeRepeater" runat="server" DataSourceID="TreeSource" OnItemDataBound="TreeRepeater_ItemDataBound">
                        <ItemTemplate>
                            <div>
                                <div style="float: left; width: 15px; text-align: right;"><%# Container.ItemIndex + 1 %>.</div>
                                <div style="float: left; width: 230px; border-bottom: 1px solid black;margin-right:5px"><%# Eval("ScientificName") + ", " + Eval("CommonName")%></div>
                                <div style="float: left; width: 45px; text-align: center; border-bottom: 1px solid black; margin-right:5px"><%# string.Format("{0:0.##}",Eval("PercentageCover")) %></div>
                               <div style="float: left; width: 45px; text-align: center; border-bottom: 1px solid black; margin-right:5px; vertical-align:text-bottom"><asp:Image ID="TreeDominantImg" runat="server"  ImageUrl="~/Images/Xmark.png" Height="16px" Width="16px" Visible='<%# ((Eval("Dominant") == DBNull.Value)?(short)0:(short)Eval("Dominant")) == 1 ? true : false %>' /></div>
                                <div style="float: left; width: 45px; text-align: center; border-bottom: 1px solid black;"><%# Eval("Indicator")%></div>
                                <div style="clear: both;"></div>
                            </div>
                        </ItemTemplate>
                        <FooterTemplate>
                            <div>
                                <div style="float: left; width: 250px;"></div>
                                <div style="float: left; width: 45px; text-align: center;border-bottom: 1px solid black;"><asp:Label ID="PercentSum" runat="server"/></div>
                                <div style="float: left;"> = Total Cover</div>
                                <div style="clear: both;"></div>
                            </div>
                            <div>
                                <div style="display:inline-block; width: 100px;"></div> 
                                <div style="display:inline-block;width:120px;">50% of total cover:</div> 
                                <div style="display:inline-block;width:40px;border-bottom: 1px solid black;"><asp:Label ID="Label6" runat="server"/></span></div>                                   
                                <div style="display:inline-block;width:120px;">20% of total cover:</div>                                    

                            </div>
                        </FooterTemplate>

Answer 1

我更喜欢使用display: inline-block 而不是float: left 因为如果你使用float: left，它会退出元件的电流。您可以将ItemTemplate中的div改成这样(只复制样式，不是整个代码)

<div>
    <div style="display: inline-block; width: 15px; text-align: right;">1.</div>
    <div style="display: inline-block; width: 230px; border-bottom: 1px solid black;margin-right:5px"></div>
    <div style="display: inline-block; width: 45px; text-align: center; border-bottom: 1px solid black; margin-right:5px"></div>
    <div style="display: inline-block; width: 45px; text-align: center; border-bottom: 1px solid black; margin-right:5px;"></div>
    <div style="display: inline-block; width: 45px; text-align: center; border-bottom: 1px solid black;"></div>
    <div style="clear: both;"></div>
</div>

和 FooterTemplate 到此(同样只需复制 style)

<div>
    <div style="display: inline-block; width: 254px;"></div>
    <div style="display: inline-block; width: 45px; text-align: center;border-bottom: 1px solid black;"></div>
    <div style="display: inline-block;">= Total Cover</div>
</div>
<div>
    <div style="display:inline-block; width: 44px;"></div>
    <div style="display:inline-block;width:130px;">50% of total cover:</div>
    <div style="display:inline-block;width:45px;border-bottom: 1px solid black;"></div>
    <div style="display:inline-block;width:130px;">20% of total cover:</div>    
    <div style="display:inline-block;width:45px;border-bottom: 1px solid black;"></div>
</div>

然后它的结果就像这个 DEMO

注意:如果页脚中的任何文字换行，只需编辑您使用的宽度即可。