Question

这里我把select标签的代码放在两个选择标签之间没有正确的对齐。

属性大小为2的select标记的位置与属性大小为2或大于2的select标记不匹配。怎么解决呢？

<select id="name" >
<option value="">select all</option>
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>


<select id="name2">
    <option value="">select all</option>
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

我能够在select标签周围找到填充或边距。

// jQuery code to change the size dynamically

$(function() {  
  $('#name2').change(function(){
    $('#name').prop('selectedIndex',0);

  });


  $('#name').change(function(){
    $('#name2').prop('selectedIndex',0);
    $('#name2').attr('size',2);
  });

});

这里我把select标签的代码放在两个select标签之间没有正确的对齐方式。属性大小为2的select标记的位置与属性大小为2或大于

的select标记不匹配

http://jsfiddle.net/TmJCE/654/

Answer 1

将vertical-align: bottom;添加到选择

$(function() {
  $('#name2').change(function() {
    $('#name').prop('selectedIndex', 0);
  });

  $('#name').change(function() {
    $('#name2').prop('selectedIndex', 0);
    $('#name2').attr('size', 3);
  });
});

select {
  vertical-align: bottom;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="name">
  <option value="">select all</option>
  <option value="1">Text 1</option>
  <option value="2">Text 2</option>
  <option value="3">Text 3</option>
</select>


<select id="name2">
  <option value="">select all</option>
  <option value="1">Text 1</option>
  <option value="2">Text 2</option>
  <option value="3">Text 3</option>
</select>

在更改属性大小时选择标记位置

1 个答案: