问答首页 → Web前端技术
0 0

复选框加什么属性出横向滚动条10

<select name="select" size="10" multiple="multiple" style="width:150px; height:150px; overflow: scroll;">
    	  <option value="1">111111111111111111111111111111111111111111111111111111111</option>
          <option value="2">2</option>
</select>

请教，复选框如果内容很长的话，怎么出横向滚动条！分值不多请包涵。
问题补充：多谢，前辈们的回复。能否提供个DEMO或连接地址也行。需要的是复选框带纵向和横向滚动条的。谢谢了。
问题补充：
283433775 写道
html中的select中设置什么属性都不可以横向滚动的，因为不支持。

用这种方式可以替代： 

<div style="width:100px;background:#ccc;overflow:auto;">
<select name="select" size="10" multiple="multiple">  
          <option value="1">111111111111111111111111111111111111111111111111111111111</option>  
          <option value="2">2</option>  
</select>
<div>


jia个div，控制select的大小，然div来实现滚动，select横向宽度让其自动扩展。

谢谢前辈的指教，我使了下，发现个问题，横向的滚动条其实是DIV本身的，如果复选框的LIST（纵向）内容很多，这个时候出现的滚动条是复选框本身的，就会出现双纵向滚动条，有什么办法改进吗
问题补充：
283433775 写道
<html>
<head>
	<title></title>
</head>
<body>
<div style="width:300px;height:300px;background:#ccc;overflow:auto;">
<select name="select" style="height:300px;" multiple="multiple">  
          <option value="1">111111111111111111111111111111111111111111111111111111111</option>  
          <option value="2">2ddd</option>  
		  <option value="3">f111111111111111111111111111111111111111111111111111111111</option>  
          <option value="4">2ddd</option>  
		  <option value="5">e1dd11111111111111111111111111111111111111111111111111111111</option>  
          <option value="6">2sss</option>  
		  <option value="7">d111111111111111111111111111111111111111111111111111111111</option>  
          <option value="8">2aaa</option>  
		  <option value="9">c111111111111111111111111111111111111111111111111111111111</option>  
          <option value="10">2bbb</option>  
		  <option value="11">b111111111111111111111111111111111111111111111111111111111</option>  
          <option value="12">2bb</option>  
		  <option value="13">a111111111111111111111111111111111111111111111111111111111</option>  
          <option value="14">2bbb</option>  
</select>
<div>
</body>
</html>


这段代码不是很容易吗？你可以自己执行以下。

可以了，看来是没有办法的办法，希望HTML5对这个问题能有好的支持。感谢前辈们的指教
Web综合 
2011年11月23日 11:56

7个答案 按时间排序 按投票排序

0 0

采纳的答案

html中的select中设置什么属性都不可以横向滚动的，因为不支持。

用这种方式可以替代： 

<div style="width:100px;background:#ccc;overflow:auto;">
<select name="select" size="10" multiple="multiple">  
          <option value="1">111111111111111111111111111111111111111111111111111111111</option>  
          <option value="2">2</option>  
</select>
<div>


jia个div，控制select的大小，然div来实现滚动，select横向宽度让其自动扩展。

2011年11月23日 12:27
0 0


因为select如果要multiple的话，就必须得设置siesize，所以你只有用js来控制size和你的options的数目一致时，就不会出现select的自带滚动条，那么就只有外层的一个div的滚动条了。 

<html>
<head>
	<title></title>
</head>
<body>
<div id="selectDiv" style="width:300px;height:200px;background:#fff;overflow:auto;">
<select id="select" height="200px;" size="10" name="select" multiple="multiple">  
          <option value="1">111111111111111111111111111111111111111111111111111111111</option>  
          <option value="2">2ddd</option>  
		  <option value="3">f111111111111111111111111111111111111111111111111111111111</option>  
          <option value="4">2ddd</option>  
		  <option value="5">e1dd11111111111111111111111111111111111111111111111111111111</option>  
          <option value="6">2sss</option>  
		  <option value="7">d111111111111111111111111111111111111111111111111111111111</option>  
          <option value="8">2aaa</option>  
		  <option value="9">c111111111111111111111111111111111111111111111111111111111</option>  
          <option value="10">2bbb</option>  
		  <option value="11">b111111111111111111111111111111111111111111111111111111111</option>  
          <option value="12">2bb</option>  
		  <option value="13">a111111111111111111111111111111111111111111111111111111111</option>  
          <option value="14">2bbb</option>  
		  <option value="11">b111111111111111111111111111111111111111111111111111111111</option>  
          <option value="12">2bb</option>  
		  <option value="13">a111111111111111111111111111111111111111111111111111111111</option>  
          <option value="14">2bbb</option>  
</select>
<div>
</body>
</html>
<script>
	window.onload =function(){
		var optAry = document.getElementsByTagName('option');
		alert(optAry.length);
		document.getElementById('select').setAttribute('size',optAry.length);
	};
</script>

2011年11月23日 13:19
0 0 

<html>
<head>
	<title></title>
</head>
<body>
<div style="width:300px;height:300px;background:#ccc;overflow:auto;">
<select name="select" style="height:300px;" multiple="multiple">  
          <option value="1">111111111111111111111111111111111111111111111111111111111</option>  
          <option value="2">2ddd</option>  
		  <option value="3">f111111111111111111111111111111111111111111111111111111111</option>  
          <option value="4">2ddd</option>  
		  <option value="5">e1dd11111111111111111111111111111111111111111111111111111111</option>  
          <option value="6">2sss</option>  
		  <option value="7">d111111111111111111111111111111111111111111111111111111111</option>  
          <option value="8">2aaa</option>  
		  <option value="9">c111111111111111111111111111111111111111111111111111111111</option>  
          <option value="10">2bbb</option>  
		  <option value="11">b111111111111111111111111111111111111111111111111111111111</option>  
          <option value="12">2bb</option>  
		  <option value="13">a111111111111111111111111111111111111111111111111111111111</option>  
          <option value="14">2bbb</option>  
</select>
<div>
</body>
</html>


这段代码不是很容易吗？你可以自己执行以下。

2011年11月23日 13:01
0 0 

<div style="width:100px;background:#ccc;overflow-x:scroll;">
<select name="select" size="10" multiple="multiple">  
          <option value="1">111111111111111111111111111111111111111111111111111111111</option>  
          <option value="2">2</option>  
</select>
<div>
这样子，横向的滚动条用overflow-x:scroll

2011年11月23日 12:44
0 0

实现不了，html的select标签本身就不支持
如果你真要实现的话，也只能通过div+js自己造一个多值选择组件，来模拟select，其实jquery easyui中就有！

2011年11月23日 12:37
0 0

下来框没有这个属性，要自己写的，
给你一个我以前收集的例子 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link href="style.css" rel="stylesheet" type="text/css">
<title>新用户</title>



<style type="text/css">
<!--
body {
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
}
.textbox {font-size: 14px; color: #000033; background-color: #FFFFFF; border: 1px #000066 double}
.style1 {color: #FFFFFF}
-->
</style>
</head>



<script langauge="javascript">
var showed=0;
var clickfrom =0;// 0- document 1- other



function CheckDep(  DepName )
{  
 theform.textfield.value = DepName; 
 //pDepName.rows[0].cells[0].innerText ="  "+ DepName; 
 eval(DepLayer).style.display ="none";
}



function ShowDep()
{
 if (showed==0)
 {
  clickfrom=1;
  eval(DepLayer).style.display='';
  showed=1;
 }
 else if ( showed==1 )
 {
  eval(DepLayer).style.display ="none";
  showed=0;
 }
}
document.onclick = OnClick;
function OnClick()
{
// 
 if ( showed == 1 )
 {
  if ( clickfrom ==1 )
  {
   clickfrom =0;
   return;
  }
  eval(DepLayer).style.display ="none"; 
  showed=0;
 } 
}
function ChangeColor( type,obj ) //0- mouseover 1-mouseout
{
 if ( type ==0 )
 {
  obj.style.background='#000066';
  obj.style.color ='#ffffff';
 }
 else
 {
  obj.style.background='#ffffff';
  obj.style.color ='#000000';
 }
}

</script>

<body width="600" border="0" oncontextmenu="return false" scroll=no>



<form action="useradd.asp" method="post" name="theform" enctype="multipart/form-data">
<table width="100%" height=""  border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td >部&nbsp;&nbsp;&nbsp;&nbsp;门：
      <input name="textfield" type="text" onClick="ShowDep()" value="-" size="30" readonly="true" >
      <div id="Layer1" style="position:absolute; left:270px; top:3px; width:16px; height:13px; z-index:2;"><a href="#" onClick="ShowDep()"><img alt="用层实现带横向滚动条的下拉框" src=http://www.3pcode.com/article/article_112/combo.gif width="16" height="16" border="0"></a></div>
      <div id="DepLayer" name="DepLayer" style="position:absolute; left:65px; top:20px; width:221px; height:163px; z-index:1; overflow: scroll; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000;display:none" >
        <table  border="1" cellpadding="0" cellspacing="0" bordercolor="#D4D0C8">
          <tr>
            <td>
              <table   border="0">
                <tr >
                  <td onMouseOver="ChangeColor(0,this)" onMouseOut="ChangeColor(1,this)"  style="CURSOR: hand">-</td>
                </tr>
                <tr >
                  <a href="#" onClick="CheckDep('一薰一莸')"><td onMouseOver="ChangeColor(0,this)" onMouseOut="ChangeColor(1,this)" style=" cursor:default">一薰一莸</td></a>
                </tr>
                <tr >
                  <a href="#" onClick="CheckDep('二百五')"><td onMouseOver="ChangeColor(0,this)" onMouseOut="ChangeColor(1,this)" style="CURSOR: hand">二百五</td></a>
                </tr>
                <tr >
                  <a href="#" onClick="CheckDep('三七二十一')"><td onMouseOver="ChangeColor(0,this)" onMouseOut="ChangeColor(1,this)" style=" cursor:default">三七二十一</td></a>
                </tr>
                <tr >
                  <a href="#" onClick="CheckDep('四通')"><td onMouseOver="ChangeColor(0,this)" onMouseOut="ChangeColor(1,this)" style=" cursor:default">四通</td></a>
                </tr>
                <tr >
                  <a href="#" onClick="CheckDep('五劳七伤')"><td onMouseOver="ChangeColor(0,this)" onMouseOut="ChangeColor(1,this)" style=" cursor:default">五劳七伤</td></a>
                </tr>
                <tr >
                  <a href="#" onClick="CheckDep('六尺之孤')"><td onMouseOver="ChangeColor(0,this)" onMouseOut="ChangeColor(1,this)" style=" cursor:default">六尺之孤</td></a>
                </tr>
     <tr >
                  <a href="#" onClick="CheckDep('一二三四五六七一二三四五六七一二三四五六七一二三四五六七')"><td onMouseOver="ChangeColor(0,this)" onMouseOut="ChangeColor(1,this)" style=" cursor:default">fffffffffffffffffffffffffffffffffffffffffffffffffffff</td></a>
                </tr>               
            </table></td>
          </tr>
        </table>
      </div></td>
  </tr>
</table>



</form>



</body>
</html>

2011年11月23日 12:32
0 0

不行吧 只能自己用span什么的模拟一个select select本身是不行的

2011年11月23日 12:21

相关推荐

    CListCtrl 完全重绘（包括表头，表项和滚动条，带checkbox）

    在某些场景下，开发者可能需要自定义控件的外观，比如添加复选框（checkbox）、改变表头样式或处理滚动条行为。针对题目中的"完全重绘（包括表头，表项和滚动条，带checkbox）"这一需求，我们将深入探讨如何实现这些...

    MFC对话框滚动条例子

    对话框通常包含各种控件，如文本框、按钮、复选框等，而有时我们需要在对话框中添加滚动条以便在大量数据或控件无法在屏幕内完全显示时提供导航。本教程将深入探讨如何在MFC中实现对话框滚动条功能。 首先，我们...

    VB控件属性大全【经典】.doc

    本文档总结了 VB 控件的常用属性，包括窗体、标签控件、文本框控件、框架控件、命令按钮控件、复选框控件、单选钮控件、组合框控件、列表框控件、水平滚动条控件、垂直滚动条控件、定时器控件、文件系统控件、形状...

    JS+CSS的table表格特效

    例如，对于水平滚动条，可以设置`overflow-x: auto;`，对于垂直滚动条，可以设置`overflow-y: auto;`。 3. **点击行变色**：这个特性增强了用户交互，当用户点击表格的某一行时，该行会改变颜色，以突出显示当前...

    这是一个关于滚动条和对话框的范例

    水平滚动条在需要查看水平方向超出视窗的内容时出现，而垂直滚动条则用于处理垂直方向上的超长内容。滚动条由三个主要部分组成：滑块、轨道和箭头。滑块是可以移动的部分，表示当前可视区域；轨道是滑块移动的路径；...

    VB控件属性大全【珍藏版】

    1.06、复选框控件(CheckBox)的常用属性 17 1.07、单选钮控件(OptionButton)的常用属性 19 1.08、组合框控件(ComboBox)常用属性 22 1.09、列表框控件(ListBox)的常用属性 25 1.10、水平滚动条控件(HScrollBar)和垂直...

    VB教程提高篇.docx

    VB教程提高篇主要介绍了几个关键的Visual Basic控件及其用法，包括图片框(PictureBox和Image)、定时器(Timer)、滚动条(HscrollBar和VscrollBar)、调色器以及单选框(OptionButton)和复选框(CheckBox)。下面将对这些...

    VB控件属性大全

    #### 1.10 水平滚动条控件(HScrollBar)和垂直滚动条控件(VScrollBar)的常用属性 滚动条控件（HScrollBar 和 VScrollBar）用于表示或控制数值范围内的位置。下面是一些常用的滚动条属性： - **Value**：当前的位置...

    DELPHI 表格控件DBGridEh属性设置说明

    - `gioShowRowselCheckboxEh`：显示行选择复选框。 这些选项控制着行首显示的信息类型。 综上所述，DBGridEh 提供了非常全面且灵活的功能，可以帮助开发者构建高效且用户友好的数据展示界面。通过合理设置上述...

    VB控件属性大全.doc

    #### 1.10 水平滚动条控件(HScrollBar)和垂直滚动条控件(VScrollBar)的常用属性 - **Value**：滚动条当前的位置。 - **Max**：滚动条的最大值。 - **Min**：滚动条的最小值。 - **SmallChange**：用户单击滚动条...

    MFC框架风格参考文档

    CScrollBar类的风格控制滚动条的行为，如SBS_HORZ表示水平滚动条，SBS_VERT表示垂直滚动条，SBS_SIZEBOX允许用户调整窗口大小。 CStatic类用于创建静态文本，其风格可以设置文本是否可读、是否是图标等，如SS_LEFT...

    计算机专业试卷2015.pdf

    16. 文本框滚动条：文本框的ScrollBars属性设置为3表示同时显示水平和垂直滚动条。 17. 输入对话框与文本框：InputBox用于获取用户输入，Text1.Text表示文本框的文本。在本例中，最终结果是两个值相加，即456 + 123...

    计算机2级VB重要笔记借鉴.pdf

    举例来说，如果要创建一个带有水平滚动条的窗体，并实时显示滚动条的位置，可以在滚动条的`Change`事件中编写代码，如`Label1.Caption = "当前位置：" & Hscroll1.Value`，这样当滚动条移动时，标签会显示当前的滚动...

    vb\第六章.ppt

    第六章主要讲解了VB编程中的一些常用控件和多窗体的应用，这包括图片框与图像框、定时器、单选钮与复选框、框架、列表框与组合框、滚动条、焦点与Tab顺序以及如何处理多窗体。下面我们将逐一深入探讨这些知识点。 ...

    VB常用标准控件.doc

    6. **滚动条(ScrollBar)**：允许用户通过滚动操作来查看或更改控件中的内容，有水平和垂直两种类型。 7. **计时器(Timer)**：定期触发事件，如每隔一定时间执行特定代码。 8. **图形控件**：包括PictureBox和Shape...

    SOUI属性列表查询

    - checked：选中状态，用于设置复选框的初始状态（选中或未选中）。 十五、Icon（图标控件） 图标控件用于在界面上显示小图标。 十六、Radio（单选框控件） 单选框控件用于在一组选项中只能选择一个选项。 - 单选...

    VB编程计算机考试题.pdf

    - **解释**：ScrollBars属性决定了文本框中是否显示水平或垂直滚动条。 34. **Tab键焦点移动**： - **知识点**：Tab键焦点移动顺序。 - **描述**：Index属性并不直接影响Tab键焦点移动的顺序。 - **解释**：...

Magicbox
Ask-but
我的问答 FAQ | 勋章

相关推荐

已解决问题

未解决问题

排行榜

Global site tag (gtag.js) - Google Analytics