当前位置：文档之家 › 【IT专家】放置在CSS下拉菜单中时,HTML select会丢失文档流吗？

【IT专家】放置在CSS下拉菜单中时,HTML select会丢失文档流吗？

  • 格式：pdf
  • 大小：234.83 KB
  • 文档页数：2

本文由我司收集整编，推荐下载，如有疑问，请与我司联系放置在CSS下拉菜单中时，HTML select会丢失文档流吗？
放置在CSS下拉菜单中时，HTML select会丢失文档流吗？[英]Does an HTML select lose document flow when placed inside a CSS drop menu? Okay, that question definitely will create confusion, but it’s the only way I can think to ask it.
 好的,这个问题肯定会造成混乱,但这是我能想到的唯一方法。

Here’s the gist of what’s occurring. I have this menu: EDIT: here’s the requested fiddle (NOTE: you have to view this in IE8 in order to replicate the issue) fiddle
 这是正在发生的事情的要点。

我有这个菜单:编辑:这是请求的小提琴(注意:你必须在IE8中查看这个以便复制问题)小提琴
 ul a href=“#” Sort /a li link 1 /li li link 2 /li /ul /li a href=“#” Filter /a div select option option 1 /option option option 2 /option /select /div /li /ul /li
I’m using this CSS to style it and create the drop down functionality:
 我正在使用这个CSS来设置它并创建下拉功能:
 ul { position: relative; padding: 1em; background-color: #eeeeee; border: 1px solid #333333;ul li { display: inline;ul li a { color: #666666; margin-left: 1em; padding: 1em;ul li:hover a { color: #111111;ul li ul { position: absolute; padding: 1em; background-color: #cccccc; border: 1px solid #666666; display: none;ul li:hover ul { display: block;ul li ul li { display: block; When I hover over the sort menu, it displays, and I’m able to click a link. However, when I hover over the filter menu, it displays the drop down, I can move my mouse around within the drop down fine, but when I click the select box to open it and I move my mouse inside to select and option, the whole drop down menu disappears. It’s as if the select box isn’t actually contained within the UL drop down.
 当我将鼠标悬停在排序菜单上时,它会显示,然后我就可以点击链接了。

但是,当我
将鼠标悬停在过滤器菜单上时,它会显示下拉菜单,我可以在下拉菜单中移动我的鼠标,但是当我单击选择框打开它并将鼠标移动到选择和选项时,整个下拉菜单消失。

就好像选择框实际上不包含在UL下拉列表中。

合集下载

CSS自定义select下拉选择框（不用其他标签模拟）

CSS自定义select下拉选择框（不用其他标签模拟）

CSS⾃定义select下拉选择框（不⽤其他标签模拟）今天群⾥有⼈问到怎么⾃定义select下拉选择框的样式，于是群⾥就展开了激烈的讨论，刚开始⼀直就是考虑怎样使⽤纯CSS实现，把浏览器默认的样式覆盖掉，但最后均因兼容问题处理不好⽽失败告终，最后的解决⽅案就是⽤其他的元素（如ul,li）模拟下拉菜单，或者是使⽤⽹上⼀些现成的插件。

其实select这个东西只靠纯CSS是不能解决这个⾃定义样式问题的，但既然折腾了这么久，还是说⼀下CSS实现的思路吧。

⾸先对于默认的样式：刚开始想到使⽤背景，但经试验对select设置背景是⽆效的，于是后来就想到了覆盖，⽤其它元素把那个向下的箭头盖住，然后给这个元素设置背景，写了个demo发现可⾏，于是就有了下⾯的这些。

⾸先⽤⼀个a标签套住select：<a class="btn-select" id="btn_select"><select><option>选项⼀</option><option>选项⼆</option><option>选项三</option><option>选项四</option><option>选项五</option></select></a>在css⾥让select“隐藏”，但不能display:none;，不然select元素不存在了，在这⾥我们可以把select的透明度改为0，这样就看不见了，但并不影响下拉框，点击时下拉框还会出现；这样貌似是可⾏了，但这是会发现每次选择选项后，选项并未显⽰，这就是select隐藏的原因了，连着⽂字也隐藏了，因此我们需要⼀个额外的标签储存每次选择的选项，下⾯是完整的HTML代码：<form><a class="btn-select" id="btn_select"><span class="cur-select">请选择</span><select><option>选项⼀</option><option>选项⼆</option><option>选项三</option><option>选项四</option><option>选项五</option></select></a></form>CSS代码：* {margin: 0;padding: 0;}body {padding: 50px 50px;}.btn-select {position: relative;display: inline-block;width: 150px;height: 25px;background-color: #f80;font: 14px/20px "Microsoft YaHei";color: #fff;}.btn-select .cur-select {position: absolute;display: block;width: 150px;height: 25px;line-height: 25px;background: #f80 url(ico-arrow.png) no-repeat 125px center;text-indent: 10px;}.btn-select:hover .cur-select {background-color: #f90;}.btn-select select {position: absolute;top: 0;left: 0;width: 150px;height: 25px;opacity: 0;filter: alpha(opacity: 0;);font: 14px/20px "Microsoft YaHei";color: #f80;}.btn-select select option {text-indent: 10px;}.btn-select select option:hover {background-color: #f80;color: #fff;}最后效果是这样的(Chrome上的截图)：但这样做并不能完全覆盖浏览器的默认样式，如图中下拉框的边框处理不掉，另外，在ie上就更难看了，所以真正项⽬中使⽤的话，还是⽤插件吧，或者⽤其他元素代替。

select下拉美化css+html

select下拉美化css+html

select下拉美化css+html⽤cssselect下拉框的美化这个可以换种⽅式实现，⾸先select的样式每个浏览器都有其默认的样式，需要先去除这些默认样式，其次，select⾥⾯的样式诸如箭头，下拉框等等的样式，这⾥提供⼀种思路，就是在select的外层添加⼀个div，对这个div元素设置样式，select元素<!-- html 布局 --><div id="selectStyle"><select id="select"><option>option 1</option><option>option 2</option><option>option 3</option><option>option 4</option><option>option 5</option></select></div>⾸先要去掉 #select 的默认样式：/* 去掉默认样式，设置新的样式 */#select{display:block;width:100%;height:100%;box-sizing:border-box;background:none;border:1px solid #222;outline:none;-webkit-appearance:none;padding:0 5px;line-height:inherit;color:inherit;cursor:default;font-size:14px;position:relative;z-index:3;}#select option{color:#222;}#select option:hover{color:#fff;}#select option:checked{background:#535353;color:#fff;}然后在外层div#selectStyle设置⾃定义样式#selectStyle{display:block;margin:0 auto;overflow:hidden;height:30px;width:240px;border-radius:0;background:#535353 url("箭头图⽚地址") right center no-repeat;background-size:auto 80%;color:#fff;line-height:2;/* 如果不想加图⽚，则可以设置⼀个⾃⼰的三⾓形样式，如下的⾃定义⽅式，见代码1 */position:relative;z-index:1;}/* 代码1 */#selectStyle:before{position:absolute;z-index:1;top:50%;right:10px;margin-top:-2.5px;display:block;width:0;height:0;border-style:solid;border-width:5px 5px 0 5px;border-color:#fff transparent transparent transparent;content:"";}/* 代码1 */#selectStyle:after{position:absolute;z-index:1;top:50%;right:10px;margin-top:-3.5px;display:block;width:0;height:0;border-style:solid;border-width:5px 5px 0 5px;border-color:#535353 transparent transparent transparent;content:"";}以上就是⾃定义select样式的⽅法；同时也可以完全不要select这个元素使⽤div+css来⾃定义⼀个跟select⼀样效果的下拉框（需要Javascript辅助）。

HTML中Select的隐藏与显示

HTML中Select的隐藏与显示

HTML中Select的隐藏与显示在html中有一种情况，如果用户想隐藏现有页面的下拉框；但是问题是，当前页面的下拉框默认的有隐藏和显示的，那么面对这种情况可能是很多人都会想到有一个iframe来覆盖这些下拉框，这样就也了啊，可是这个是可以解决当前的问题了，可是这个好像不是最终的方案了，以下是一个显示和隐藏下拉框的简单demo，看看吧。

代码如下：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE></HEAD><script>var array = new Array();//用来保存为显示的select元素//隐藏Select的元素function hidden(){var oSelect = document.getElementsByTagName_r('select');//获得所有的select for(var i=0;i<oSelect.length;i++){if(oSelect[i].style.display==''){array.push(oSelect[i]); //把对象放入数组oSelect[i].style.display="none";}}}//show显示Select的元素function show(){var oSelect = document.getElementsByTagName_r('select');//获得所有的select for( var i=0;i<array.length;i++){if(array[i].style.display){oSelect[i].style.display='';}}}</script><BODY><select name="test1"><option VALUE="1" SELECTED>宝马</option><option VALUE="2">保时捷</option><option VALUE="3" SELECTED>奔驰</option></select><select name="test2" style="display:none"><option VALUE="1" SELECTED>test01</option><option VALUE="2">test02</option><option VALUE="3" SELECTED>test03</option></select><select name="test3" style="display:none"><option VALUE="1" SELECTED>test501</option><option VALUE="2">test502</option><option VALUE="3" SELECTED>test503</option></select><select name="test4"><option VALUE="1" SELECTED>test601</option><option VALUE="2">test602</option><option VALUE="3" SELECTED>test603</option></select><button onclick='hidden();'> hidden</button><button onclick='show();'>Show</button></BODY></HTML>这个方法是用js的数组来保存显示的select最后显示的时候再一次拿回数组来显示！原文链接：。

css脱离文档流的理解

css脱离文档流的理解

css脱离文档流的理解CSS（层叠样式表）是前端开发中非常重要的一项技术，它可以用来对网页进行美化和布局。

在CSS中，文档流是一个非常重要的概念。

文档流是网页元素默认的排列方式，元素按照其出现的顺序在网页上依次排列，有时候我们需要将某个元素从文档流中脱离出来，这就是脱离文档流。

脱离文档流的概念是指将元素从文档流中移出，可以让元素不再按照默认的排列方式进行布局，而是可以自由地定位在网页中的任意位置。

脱离文档流可以通过CSS的position属性来实现，常用的取值有relative、absolute和fixed。

使用position:relative可以将元素相对于其正常位置进行偏移。

通过设置top、right、bottom和left属性可以控制元素的偏移量。

例如，下面的代码将会使得元素相对于其正常位置向右偏移20像素：```.element {position: relative;left: 20px;}```使用position:absolute可以将元素脱离文档流，并相对于其最近的非static定位的父元素进行定位。

如果没有非static定位的父元素，则相对于html元素进行定位。

通过设置top、right、bottom和left属性可以控制元素相对于定位父元素的位置。

例如，下面的代码将会使得元素相对于其定位父元素向下偏移50像素：```.element {position: absolute;top: 50px;}```使用position:fixed可以将元素脱离文档流，并相对于浏览器窗口进行定位。

通过设置top、right、bottom和left属性可以控制元素相对于浏览器窗口的位置。

例如，下面的代码将会使得元素固定在浏览器窗口的右上角：```.element {position: fixed;top: 0;right: 0;}```脱离文档流的元素不会占据文档流中的空间，这意味着其他元素会忽略脱离文档流的元素的存在，从而可能导致其他元素的位置发生变化。