select的边框与 option label长度过长

最新推荐文章于 2024-09-30 14:12:26 发布

qingfeng_825

最新推荐文章于 2024-09-30 14:12:26 发布

阅读量810

点赞数

分类专栏：界面技术文章标签： HTML

本文链接：https://blog.csdn.net/qingfeng_825/article/details/83725144

版权

界面技术专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>

 <BODY>
  <table width="200"  cellspacing="0" cellpadding="0" border="1" bordercolor="yellow">
              <tr>
			       <td align="left" style="font-size:12px;" width="50"> 左边</td>
                <td align="right">
				<span style="width:118px;border:1px solid black;">
				<select name="postSelect" multiple style="margin-left:-100px;margin-top:-3px;width:118px;" 
				size="4"
				>
				<option value="1" title="111111">111111</option> 
				<option value="2" title="222222">222222</option> 
				<option value="3" title="333333">333333</option> 				
				<option value="4" title="444444444444444444444444444444">444444444444444444444444444444</option> 
				<option value="5">555555</option> 
				<option value="6">666666</option> 		
					
				</select>
				<span>
				<!--   测试环境：IE8
				一、select 边框的问题
				1、size属性用控制下拉框会显示几个option，如果是1，则显示1个option，多于一个option则显示竖向的滚动条，换句话说，size是用来控制高度的。
				2、 style="width:100px" 控制宽度后，上、左两个方向有黑色框线，下、右没有，为什么？没有办法解决，所以用了加span的办法，
				设置select\span的宽度相同，给span 加border:1px solid black，这个外框是真正我们看到的外框，然后设置select的margin-left:-100px;margin-top:-3px，这样我们就解决了边框的问题。
				二、option选项过长的问题，
				先注意option label值是没有换行的，加上\n,<br>都会被忽略，所以只能想别的办法
				1、加一个title属性，值为你要显示的那个长度很长的值，这样当鼠标移动option上会有提示。

				-->
				</td>
                <td align="right" width="50">右边   </td>
              </tr>
            </table
 </BODY>
</HTML>