Question

我有这个下拉列表，当它没有被点击时就是这样：

但是当我点击以选择一个选项时，它会将其下方的内容（电影）向下移动：

我希望此下拉列表涵盖以下内容，而不是将其推下来。

这是我的HTML代码：

<div style="background-color: white; width: 100%; position:relative;">
  <div class="styled-select">
                <select id="campaignListId" name="campaignId" onmousedown="if(this.options.length>5){this.size=5;}" onchange='this.size=0;' onblur="this.size=0;">
                    <option value="1">First</option>
                    <option value="2">Second</option>
                    <option value="3">Third</option>
                    <option value="4">Fourth</option>
                    <option value="5">Fifth</option>
                    <option value="6">Sixth</option>
                    <option value="7">Seventh</option>
                    <option value="8">Eighth</option>
                    <option value="9">Ninth</option>
                    <option value="10">Tenth</option>
                </select>
  </div>
<div style="background-color: #F8F8F8; width: 100%; position:relative; left: 0px; ">
  <br />
    <div style="width: 944px; position:relative;  margin: 0 auto; ">
                    <font style="font-size: 22px; font-weight: bold; ">

                        <span id="spanMovies" style="cursor: pointer; color: #4F9DD0; text-decoration: underline; " >
                            Movies
                        </span>
    </div>
</div>
</div>

我使用了这段代码：

onmousedown事件=＆＃34;如果（this.options.length→5）{this.size = 5;}＆＃34; 为了只显示我的选项中的5项。

这是我的CSS：

.styled-select select {
            background: transparent;
            width: 944px;
            padding: 5px;
            font-size: 32px;
            font-weight: bold; 
            font-family: 'PT Sans', sans-serif;
            color: #4F9DD0;
            line-height: 1;
            border: 0;
            border-radius: 0;

            -webkit-appearance: none;
            -moz-appearance: none;

            -o-appearance: none;
        }
        .styled-select {
            overflow: hidden;
            background: url(resources/img/campaignSelector.png) no-repeat right #ddd;

            background-color: white;
            width: 944px; 
            position:relative;  
            margin: 0 auto;
        }

Answer 1

我认为你必须绝对定位private static void Main(string[] args) { var webTask=AccessTheWebAsync(); //... do other work until the resuls is actually needed var pageSize=webTask.Result; //... now use the returned page size }。

它会占用流量的select，并阻止它与其他元素交互。

＆＃13;

select

＆＃13;

.styled-select {
  background: red;
  position: relative;
  height: 1.2em;
}
.styled-select select {
  position: absolute;
  top: 0;
  left: 0;
}
.movie {
  background: grey;
}
span {
  font-size: 22px;
  font-weight: bold;
  cursor: pointer;
  color: #4F9DD0;
  text-decoration: underline;
}

＆＃13;

Answer 2

一种方法是使用javascript添加和删除类。

<Child ref="child" />

从电影div中移除<select id="campaignListId" name="campaignId" onmousedown="if(this.options.length>5){this.size=5; this.parentNode.className='styled-select classname'}" onchange='this.size=0; this.parentNode.className="styled-select";' onblur="this.size=0; this.parentNode.className='styled-select';"> .classname{ position:absolute; }

＆＃13;

position:relative

＆＃13;

.styled-select select {
            background: transparent;
            width: 944px;
            padding: 5px;
            font-size: 32px;
            font-weight: bold; 
            font-family: 'PT Sans', sans-serif;
            color: #4F9DD0;
            line-height: 1;
            border: 0;
            border-radius: 0;

            -webkit-appearance: none;
            -moz-appearance: none;

            -o-appearance: none;
        }
        .styled-select {
            overflow: hidden;
            background: url(resources/img/campaignSelector.png) no-repeat right #ddd;

            background-color: white;
            width: 944px; 
            position:relative;  
            margin: 0 auto;
        }
        
        .classname{
          position:absolute;
          
        }

＆＃13;

<强> Working Fiddle

下拉菜单将内容向下移动

2 个答案: