转发器控件中的CSS样式

Question

嗨朋友们，我试图让我的转发器看起来像我附加的img。我已经实现了直到总线覆盖，但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

尝试以下方法：

    <FooterTemplate>
        <div>
            <div style="float: left; width: 250px;">&nbsp;</div>
            <div style="float: left; width: 45px; height:15px; text-align: center;border-bottom: 1px solid black;"><asp:Label ID="PercentSum" runat="server" Text=" "/></div>
            <div style="float: left;"> = Total Cover</div>
            <div style="clear: both;"></div>
        </div>
        <div>
            <div style="float: left; width: 60px;">&nbsp;</div> 
            <div style="float: left;">50% of total cover:&nbsp;</div> 
            <div style="float: left; width:40px;border-bottom: 1px solid black; height:15px;text-align: center;"><asp:Label ID="Label6" runat="server" Text=" "/></span></div>
            <div style="float: left;">&nbsp;</div>
            <div style="float: left;">20% of total cover:&nbsp;</div>                                    
            <div style="float: left; width:40px;border-bottom: 1px solid black; height:15px;text-align: center;"><asp:Label ID="Label1" runat="server" Text=" "/></span></div>
            <div style="clear: both;"></div>
        </div>
    </FooterTemplate>

Answer 2

我更喜欢使用display: inline-block而不是float: left，因为如果您使用float: left，它将退出元素的当前流程。您可以将div中的ItemTemplate更改为此（只需复制style，而不是整个代码）

<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

一样产生结果

注意：如果页脚中的任何字词换行换行，只需编辑您使用的width。