将宽度应用于绝对定位的元素出错了

时间：2017-12-25 11:50:33

标签： javascript jquery html css

我创建了自己的下拉列表，因为我无法根据需要设置默认选择输入的样式，但是我的列表宽度错误。我的下拉列表的宽度为百分比：100%。我显示的列表是隐藏的并且有position: absolute;，因此我可以将其显示在另一个元素之上。我需要此列表与我的下拉字段的宽度始终相同，但如果我将其设置为width: 100%，则它的宽度不会相同。转到这个小提琴，看看问题：

https://jsfiddle.net/vaxobasilidze/c5aqhqcu/2/

如何让我的下拉按钮和列表具有相同的大小？此外，我尝试了position: relative;属性并使其相对于我的下拉，宽度在这种情况下是正确的，但是列表没有出现在其他列表之上，相反，它将所有内容都移动了。所以，如果有办法，让我的列表相对，但出现在其他人之上，这将是解决问题的另一种选择。

＆＃13;
＆＃13; 
$('body').on('click touchend', '#typeSelect', function() {
  $('#typeDropDownList').toggle();
});

$('body').on('click touchend', '.typeSelect', function() {
  var Classes = $(this).attr('class').split(" ");
  $('.active').removeClass('active');
  $(this).addClass('active');
  $('.typeDropDownList').hide();
  $('.' + Classes[0] + 'List').toggle();
});

$('body').on('click touchend', '.active', function() {
  var Classes = $(this).attr('class').split(" ");
  $('.' + Classes[0] + 'List').hide();
  $('.active').removeClass('active');
});

$(document).mouseup(function(e) {
  var container = $("#typeSelect");
  var container1 = $("#typeDropDownList");
  if (!container.is(e.target) && container.has(e.target).length === 0 && !container1.is(e.target) && container1.has(e.target).length === 0) {
    container1.hide();
  }
});
$(document).mouseup(function(e) {
  var container = $(".typeSelect");
  var container1 = $(".typeDropDownList");
  if (!container.is(e.target) && container.has(e.target).length === 0 && !container1.is(e.target) && container1.has(e.target).length === 0) {
    container1.hide();
  }
});

$('body').on('click touchend', '#typeDropDownList li', function() {
  var value = $(this).text();
  $('#typeSelect .type').text(value);
  $('#typeDropDownList').toggle();
  showTable();
});
$('body').on('click touchend', '.typeDropDownList li', function() {
  var value = $(this).text();
  $('.active .type').text(value);
  $('.typeDropDownList').hide();
  $('.active').removeClass('active');
});
＆＃13; 
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #2c2c2c;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJjMmMyYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM3JSIgc3RvcC1jb2xvcj0iIzNkM2QzZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY2JSIgc3RvcC1jb2xvcj0iIzM1MzUzNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY2JSIgc3RvcC1jb2xvcj0iIzM1MzUzNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMzEzMTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #2c2c2c), color-stop(37%, #3d3d3d), color-stop(66%, #353535), color-stop(66%, #353535), color-stop(100%, #131313));
  background: -webkit-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%);
  background: -o-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%);
  background: -ms-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%);
  background: linear-gradient(to right, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c2c2c', endColorstr='#131313', GradientType=1);
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  color: #b8c0c8;
  background: rgba(0, 0, 0, 0.3);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: bold;
}

#leftDiv {
  display: inline-block;
  width: 25%;
  height: 100%;
  border-right: 3px solid rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  float: left;
  margin: 0;
  padding: 0;
  overflow: auto;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.33);
  position: relative;
}

#settingsDiv {
  margin: 0;
  width: 100%;
  min-height: 10px;
  box-sizing: border-box;
  margin: 0;
  padding: 3px;
  overflow: auto;
}

#mainDiv {
  display: inline-block;
  width: 75%;
  min-width: 700px;
  min-height: 100%;
  box-sizing: border-box;
  position: relative;
  float: left;
  margin: 0;
  overflow: auto;
  padding: 3px;
}

#settingsDiv {
  width: 100%;
  overflow: auto;
  box-sizing: border-box;
}

.adapterSettings {
  width: 100%;
}

.adapterSettings table {
  width: 100%;
}

.adapterInput select {
  width: 100%;
}

.adapterInput input {
  width: 100%;
}

.adapterInput * {
  box-sizing: border-box;
}

#typeSelect {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.7);
  background-image: url(images/comment-bg.png);
  background-repeat: repeat;
  background-position: 300px;
  width: 353px;
  padding: 5px;
  line-height: 1;
  border-radius: 4px;
  box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1);
  -webkit-appearance: none;
  color: #b8c0c8;
  width: 100%;
  cursor: pointer;
  background: rgb(76, 76, 76);
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRjNGM0YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE4JSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMzJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc0JSIgc3RvcC1jb2xvcj0iIzQ3NDc0NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyYzJjMmMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 18%, rgba(102, 102, 102, 1) 33%, rgba(71, 71, 71, 1) 74%, rgba(44, 44, 44, 1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(76, 76, 76, 1)), color-stop(18%, rgba(89, 89, 89, 1)), color-stop(33%, rgba(102, 102, 102, 1)), color-stop(74%, rgba(71, 71, 71, 1)), color-stop(100%, rgba(44, 44, 44, 1)));
  background: -webkit-linear-gradient(top, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 18%, rgba(102, 102, 102, 1) 33%, rgba(71, 71, 71, 1) 74%, rgba(44, 44, 44, 1) 100%);
  background: -o-linear-gradient(top, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 18%, rgba(102, 102, 102, 1) 33%, rgba(71, 71, 71, 1) 74%, rgba(44, 44, 44, 1) 100%);
  background: -ms-linear-gradient(top, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 18%, rgba(102, 102, 102, 1) 33%, rgba(71, 71, 71, 1) 74%, rgba(44, 44, 44, 1) 100%);
  background: linear-gradient(to bottom, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 18%, rgba(102, 102, 102, 1) 33%, rgba(71, 71, 71, 1) 74%, rgba(44, 44, 44, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#2c2c2c', GradientType=0);
}

#typeSelect li {
  width: 100%;
  list-style: none;
}

#typeDropDownList {
  margin: 0;
  padding: 0;
  line-height: 1;
  -webkit-appearance: none;
  color: #b8c0c8;
  width: 100%;
  border-radius: 3px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.26);
  display: none;
  position: absolute;
  z-index: 100;
  margin-right: 5px;
  width: 100%;
}

#typeDropDownList li {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.7);
  /*background-image:url(images/cusel-bg-1.png);*/
  background-repeat: repeat;
  background-position: 300px;
  padding: 5px;
  width: 100%;
  cursor: pointer;
  background: rgb(76, 76, 76);
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRjNGM0YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE4JSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMzJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc0JSIgc3RvcC1jb2xvcj0iIzQ3NDc0NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyYzJjMmMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 18%, rgba(102, 102, 102, 1) 33%, rgba(71, 71, 71, 1) 74%, rgba(44, 44, 44, 1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(76, 76, 76, 1)), color-stop(18%, rgba(89, 89, 89, 1)), color-stop(33%, rgba(102, 102, 102, 1)), color-stop(74%, rgba(71, 71, 71, 1)), color-stop(100%, rgba(44, 44, 44, 1)));
  background: -webkit-linear-gradient(top, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 18%, rgba(102, 102, 102, 1) 33%, rgba(71, 71, 71, 1) 74%, rgba(44, 44, 44, 1) 100%);
  background: -o-linear-gradient(top, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 18%, rgba(102, 102, 102, 1) 33%, rgba(71, 71, 71, 1) 74%, rgba(44, 44, 44, 1) 100%);
  background: -ms-linear-gradient(top, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 18%, rgba(102, 102, 102, 1) 33%, rgba(71, 71, 71, 1) 74%, rgba(44, 44, 44, 1) 100%);
  background: linear-gradient(to bottom, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 18%, rgba(102, 102, 102, 1) 33%, rgba(71, 71, 71, 1) 74%, rgba(44, 44, 44, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#2c2c2c', GradientType=0);
}

#typeDropDownList li:first-child {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

#typeDropDownList li:last-child {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.26);
}

#adapterSettings {
  background: url(images/comment-bg2.png);
}

.adapterInput {
  width: 100%;
  height: 100%;
  padding: 0;
}

#adapterInputContainer {
  width: 100%;
  font-size: 10px;
}

#adapterInputContainer tr {
  line-height: 20px;
}

#adapterInputContainer tr td:first-child {
  width: 50%;
}

.typeSelect {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.7);
  width: 353px;
  padding: 5px;
  line-height: 1;
  border-radius: 4px;
  box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1);
  -webkit-appearance: none;
  color: #b8c0c8;
  width: 100%;
  cursor: pointer;
  background: rgb(76, 76, 76);
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRjNGM0YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE4JSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMzJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc0JSIgc3RvcC1jb2xvcj0iIzQ3NDc0NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyYzJjMmMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 18%, rgba(102, 102, 102, 1) 33%, rgba(71, 71, 71, 1) 74%, rgba(44, 44, 44, 1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(76, 76, 76, 1)), color-stop(18%, rgba(89, 89, 89, 1)), color-stop(33%, rgba(102, 102, 102, 1)), color-stop(74%, rgba(71, 71, 71, 1)), color-stop(100%, rgba(44, 44, 44, 1)));
  background: -webkit-linear-gradient(top, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 18%, rgba(102, 102, 102, 1) 33%, rgba(71, 71, 71, 1) 74%, rgba(44, 44, 44, 1) 100%);
  background: -o-linear-gradient(top, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 18%, rgba(102, 102, 102, 1) 33%, rgba(71, 71, 71, 1) 74%, rgba(44, 44, 44, 1) 100%);
  background: -ms-linear-gradient(top, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 18%, rgba(102, 102, 102, 1) 33%, rgba(71, 71, 71, 1) 74%, rgba(44, 44, 44, 1) 100%);
  background: linear-gradient(to bottom, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 18%, rgba(102, 102, 102, 1) 33%, rgba(71, 71, 71, 1) 74%, rgba(44, 44, 44, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#2c2c2c', GradientType=0);
}

.typeSelect li {
  width: 100%;
  list-style: none;
}

.typeSelect input {
  list-style: none;
  margin: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0);
  line-height: 1;
  -webkit-appearance: none;
  border: none;
  color: #b8c0c8;
  width: 100%;
  font-size: 10px;
}

.typeDropDownList {
  margin: 0;
  padding: 0;
  line-height: 1;
  -webkit-appearance: none;
  color: #b8c0c8;
  width: 100%;
  border-radius: 3px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.26);
  display: none;
  position: absolute;
  z-index: 100;
  width: 48%;
}

.typeDropDownList li {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.7);
  /*background-image:url(images/cusel-bg-1.png);*/
  background-repeat: repeat;
  background-position: 300px;
  padding: 5px;
  width: 100%;
  cursor: pointer;
  background: rgb(76, 76, 76);
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRjNGM0YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE4JSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMzJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc0JSIgc3RvcC1jb2xvcj0iIzQ3NDc0NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyYzJjMmMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 18%, rgba(102, 102, 102, 1) 33%, rgba(71, 71, 71, 1) 74%, rgba(44, 44, 44, 1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(76, 76, 76, 1)), color-stop(18%, rgba(89, 89, 89, 1)), color-stop(33%, rgba(102, 102, 102, 1)), color-stop(74%, rgba(71, 71, 71, 1)), color-stop(100%, rgba(44, 44, 44, 1)));
  background: -webkit-linear-gradient(top, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 18%, rgba(102, 102, 102, 1) 33%, rgba(71, 71, 71, 1) 74%, rgba(44, 44, 44, 1) 100%);
  background: -o-linear-gradient(top, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 18%, rgba(102, 102, 102, 1) 33%, rgba(71, 71, 71, 1) 74%, rgba(44, 44, 44, 1) 100%);
  background: -ms-linear-gradient(top, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 18%, rgba(102, 102, 102, 1) 33%, rgba(71, 71, 71, 1) 74%, rgba(44, 44, 44, 1) 100%);
  background: linear-gradient(to bottom, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 18%, rgba(102, 102, 102, 1) 33%, rgba(71, 71, 71, 1) 74%, rgba(44, 44, 44, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#2c2c2c', GradientType=0);
}

.typeDropDownList li:first-child {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.typeDropDownList li:last-child {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.26);
}

.adapterSettings {
  background: url(images/comment-bg2.png);
  padding: 0;
}

.adapterInput {
  width: 50%;
  min-width: 80px;
}

.arrow {
  display: inline-block;
  margin: 0;
  margin-right: -5px;
  margin-top: -5px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-left: 1px solid rgba(0, 0, 0, 0.7);
  width: 20px;
  height: 20px;
  float: right;
  background: rgb(17, 17, 17);
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzExMTExMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMyJSIgc3RvcC1jb2xvcj0iIzU0NTQ1NCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY0JSIgc3RvcC1jb2xvcj0iIzNkM2QzZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMzEzMTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top, rgba(17, 17, 17, 1) 0%, rgba(84, 84, 84, 1) 32%, rgba(61, 61, 61, 1) 64%, rgba(19, 19, 19, 1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(17, 17, 17, 1)), color-stop(32%, rgba(84, 84, 84, 1)), color-stop(64%, rgba(61, 61, 61, 1)), color-stop(100%, rgba(19, 19, 19, 1)));
  background: -webkit-linear-gradient(top, rgba(17, 17, 17, 1) 0%, rgba(84, 84, 84, 1) 32%, rgba(61, 61, 61, 1) 64%, rgba(19, 19, 19, 1) 100%);
  background: -o-linear-gradient(top, rgba(17, 17, 17, 1) 0%, rgba(84, 84, 84, 1) 32%, rgba(61, 61, 61, 1) 64%, rgba(19, 19, 19, 1) 100%);
  background: -ms-linear-gradient(top, rgba(17, 17, 17, 1) 0%, rgba(84, 84, 84, 1) 32%, rgba(61, 61, 61, 1) 64%, rgba(19, 19, 19, 1) 100%);
  background: linear-gradient(to bottom, rgba(17, 17, 17, 1) 0%, rgba(84, 84, 84, 1) 32%, rgba(61, 61, 61, 1) 64%, rgba(19, 19, 19, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#111111', endColorstr='#131313', GradientType=0);
}

.type {
  min-width: 150px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<body>
  <div id="leftDiv">
    <div id="settingsDiv">
      <table style="width: 100%;" id="adapterSettings">
        <tr>
          <th colspan="2">Adapter</th>
        </tr>
        <tr>
          <td class="adapterInput" colspan="2" style="text-align: center;">
            <ul id="typeSelect">
              <li><span class="type">--- TYPE ---</span><span class="arrow"><img src="https://www.materialui.co/materialIcons/navigation/arrow_drop_down_white_192x192.png" width="100%" height="100%" alt="arrow" title="arrow" /></span></li>
            </ul>
            <ul id="typeDropDownList">
              <li>--- TYPE ---</li>
              <li>DVB-S</li>
              <li>DVB-S2</li>
              <li>DVB-T</li>
              <li>DVB-T2</li>
              <li>DVB-C</li>
            </ul>
          </td>
        </tr>
        <table id="adapterInputContainer">
          <tr>
            <td>DYSEQ-port:</td>
            <td class="dyseq adapterInput">
              <ul class="dyseq typeSelect">
                <li><span class="type">0</span><span class="arrow"><img src="https://www.materialui.co/materialIcons/navigation/arrow_drop_down_white_192x192.png" width="100%" height="100%" alt="arrow" title="arrow" /></span></li>
              </ul>
              <ul class="dyseqList typeDropDownList">
                <li>0</li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
              </ul>
            </td>
          </tr>
        </table>
      </table>
    </div>
  </div>
</body>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

这是因为您已将填充应用于下拉菜单字段而不是下拉菜单，要么添加两者，要么将padding中的typeSelect更改为

padding: 5px 0 5px 0;

请参阅此fiddle进行演示，希望有所帮助。

答案 1 :(得分：0)

以下是我使用JavaScript编写的解决方案：

$('body').on('click touchend', '#typeSelect', function(){
    var width = $(this).width();
    $('#typeDropDownList').css({'width' : width+12}).toggle();
});
$(window).resize(function(){
    var width = $('#typeSelect').width();
    $('#typeDropDownList').css({'width' : width+12});
    var width1 = $('.typeSelect').width();
    $('.typeDropDownList').css({'width' : width1+12});
});

在显示列表之前，第一个函数在单击时设置正确的宽度。如果窗口调整大小，第二个设置正确的宽度。添加此功能可以解决问题。

相关问题
最新问题