请教一个样式问题

norron 2009-11-24 05:24:55

我用两个panel来实现。进度条的功能。外面的panel表示100% 里面的则表示实际的值

如下代码就表示30% 进度条全用panel的背景颜色不同来表示（这也是我觉得，最简单的办法了，没有用图片）

但现在有问题是，我想在进度条的中间位置显示文字，如 30% 不知道这个加在在哪个位置可以实现。

我想显示在外面的panel的中间，相当于浮动在外层panel的中间，不知道怎么设置这个样式。请高手赐教！



 <asp:Panel id="panelBarSide" runat="server" Width="300px" BorderStyle="Solid" BorderWidth="1px"  ForeColor="Silver" HorizontalAlign="left" BackColor="#CCFFCC"  BorderColor="Black">

     <asp:Panel id="panelProgress" runat="server" Width="30px" BackColor="LightBlue" >

      </asp:Panel>

</asp:Panel>

...全文

169 17 打赏收藏转发到动态举报

写回复

用AI写文章

17 条回复

切换为时间正序

请发表友善的回复…

发表回复

norron 2009-11-24

打赏
举报

另外，koukoujiayi 兄弟，你的方法，结果只是文字显示在内层居中哦。这样的话，如果为0%的话，可能是显示不出来文字的

norron 2009-11-24

打赏
举报

jshi123 谢谢你！可以用，达到了我的要求，再次感谢！

QIAN448043229 兄弟的，我使了，也行，不过MS还得再调一下，不然下面的边框是显示不出来了。

出于简单程度，我用jshi123的了，谢谢你们！

结贴了！

QIAN448043229 2009-11-24

打赏
举报

只需要加个padding-top就行了

<style type="text/css">
.Panel1_centen
{
padding-top:2px;
}

</style>
</head>
<body style=" text-align:center">
<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server" Width=300px Height=22px
BorderWidth=1px BackColor=Red HorizontalAlign=Left CssClass="Panel1_centen">
<asp:Panel ID="Panel2" runat="server" Width=30px Height=18px BackColor=Blue HorizontalAlign=Center>
<div style=" width:300px; height:15px">
<asp:Label ID="Label1" runat="server" Height="15px"></asp:Label>
</div>
</asp:Panel>
</asp:Panel>
<asp:Timer ID="Timer1" runat="server" Interval="1000" ontick="Timer1_Tick">
</asp:Timer>
</ContentTemplate>
</asp:UpdatePanel>
<br />

</form>
</body>

只做到你说的效果但是最后的数据你自己搞

jshi123 2009-11-24

打赏
举报

不好意思，上面的代码只在FF下做了测试，请再次无视。
下面这个在FF，IE各版本都测试过了：



<asp:Panel id="panelBarSide" runat="server" Width="300px" BorderStyle="Solid" BorderWidth="1px"  ForeColor="Silver" HorizontalAlign="left" BackColor="#CCFFCC"  BorderColor="Black"

    style="text-align:center; position:absolute">

    <asp:Panel id="panelProgress" runat="server" Width="23px" BackColor="LightBlue" style="position:absolute; left:0px">

     

    </asp:Panel>

    <span style="position:absolute">30%</span> 

</asp:Panel>

happy664618843 2009-11-24

打赏
举报

没有用过帮顶

jshi123 2009-11-24

打赏
举报

上面写的经测试有误，请无视。



<asp:Panel id="panelBarSide" runat="server" Width="300px" BorderStyle="Solid" BorderWidth="1px"  ForeColor="Silver" HorizontalAlign="left" BackColor="#CCFFCC"  BorderColor="Black"

	style="text-align:center">

	<asp:Panel id="panelProgress" runat="server" Width="13px" BackColor="LightBlue" style="position:absolute">

	 

	</asp:Panel>

	<span style="position:absolute">30%</span> 

</asp:Panel>

jshi123 2009-11-24

打赏
举报



<asp:Panel id="panelBarSide" runat="server" Width="300px" BorderStyle="Solid" BorderWidth="1px"  ForeColor="Silver" HorizontalAlign="left" BackColor="#CCFFCC"  BorderColor="Black"

	style="text-align:center">

	<asp:Panel id="panelProgress" runat="server" Width="30px" BackColor="LightBlue" style="float:left">

	 

	</asp:Panel>

	<span>30%</span>

</asp:Panel>

tv666 2009-11-24

打赏
举报

koukoujiayi 2009-11-24

打赏
举报

加个Label
<asp:Panel id="panelBarSide" runat="server" Width="300px" BorderStyle="Solid" BorderWidth="1px" ForeColor="Silver" HorizontalAlign="left" BackColor="#CCFFCC" BorderColor="Black">
<asp:Panel id="panelProgress" runat="server" Width="70px" BackColor="LightBlue" CssClass="ce" >
<asp:Label ID="Label1" runat="server" Text="30%"></asp:Label>
</asp:Panel>

css:
.ce{ text-align:center;}

liaoyukun111 2009-11-24

打赏
举报

好像有难度呀

norron 2009-11-24

打赏
举报

楼上的兄弟。我不太清楚，你这个东西是加在哪里？不管是外层，还是层，还是在里面再加一个DIV设置这个，都没有能搞定。
可能你没能明白我的意思。真想截一个图给大家看一下。却没有连接地址。郁闷

我是想，在我层的panel中间位置，放上一段字如“20%”

但内层的panel 还是靠左边的

你可以把我上面的代码，拷到你的VS 中看看就明白了。

是一个进度条，我现在就想在进度条的是间位置显示一句话。

如果能解决，我加分给你都没有问题的。