请教怎么让span浮在input上面-HTML教程-爱易网页

请教怎么让span浮在input上面

日期：2014-05-16　浏览次数：20766 次

请问如何让span浮在input上面。
请看下面代码：
<asp:TextBox runat="server" ID="txtText" CssClass="tagValueByText" Style="margin-right: -6px;"
        CausesValidation="false" oncontextmenu="window.event.returnValue=false"></asp:TextBox>
    <span id="td1" runat="server" style="width: 17px; height: 16px;  border: #7f7f7f solid 1px; cursor: hand; margin: 0 5px 1px -16px; background: url(/Images/buttonbk.gif) no-repeat 2px 0; "
        oncontextmenu="window.event.returnValue=false">abcd</span>

本来的效果是input这个标签会浮在input的右端，就是input不会遮住span。但我在页头加了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
这段代码后，span就跑到input下面去了，请问要怎么将span浮在input上面呢？
------解决方案--------------------
你可能考虑如下的实现方式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script>



</script>

<style>

.box{border:solid 1px #ccc;width:300px;height:30px;}

.box .text{width:250px;float:left;border:none;background:none;height:100%;line-height:30px;}

.box .float{width:50px;background:#9C0;color:#fff;height:100%;line-height:30px; text-align:center;float:left;}

</style>

</head>



<body>

<div class="box">

	<input type="text" class="text" />

    <span class="float">测试</span>

</div>

</body>

</html>

------解决方案--------------------



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script>

 

</script>

<style>

.box{width:300px;height:30px; position:relative;}

.box .text{width:248px;float:left;border:none;background:none;height:100%;line-height:30px;border:solid 1px #ccc;}

.box .float{width:50px;background:#9C0;color:#fff;height:100%;line-height:30px; text-align:center;float:left;position:relative; top:2px;left:-50px;}



</style>

</head>

 

<body>

<div class="box">

    <input type="text" class="text" />

    <span class="float">测试</span>

</div>

</body>

</html>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

请教怎么让span浮在input上面

相关资料更多>

推荐阅读更多>