Question

我正在使用JQuery 1.11。我正在尝试创建一个样式化的选择菜单，根据最大元素的宽度自动调整其宽度。我有

<div class="profileField">
    Birthday<br/> 
    <select id="user_dob_2i" name="user[dob(2i)]">
<option value="">Select Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>

然后我使用以下CSS

.select {
  cursor: pointer;
  display: inline-block;
  position: relative;
  font-size: 16px;
  color: #fff;
  width: 220px;
  height: 42px;
}

.select-styled {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: gray;
  padding: 11px 12px;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

.select-styled:after {
  content: "";
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-color: #fff transparent transparent transparent;
  position: absolute;
  top: 16px;
  right: 10px;
}

.select-styled:hover {
  background-color: #7b7b7b;
}

.select-styled:active, .select-styled.active {
  background-color: #737373;
}

.select-styled:active:after, .select-styled.active:after {
  top: 9px;
  border-color: transparent transparent #fff transparent;
}

.select-options {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 999;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #737373;
  overflow: scroll;
}

.select-options li {
  margin: 0;
  padding: 12px 0;
  text-indent: 15px;
  border-top: 1px solid #676767;
  -webkit-transition: all 0.15s ease-in;
  transition: all 0.15s ease-in;
}

.select-options li:hover {
  color: gray;
  background: #fff;
}

.select-options li[rel="hide"] {
  display: none;
}

ul.select-options {
  max-height: 15em;
  overflow-y: scroll;
  overflow-x: hidden;
}

然而，我无法弄清楚的是如何将所有默认选项文本保留在一行中。如果你看看我的JSFiddle - http://jsfiddle.net/m5bxbx6d/1/，你会注意到“选择月份”在Mac Firefox上渗透成两行。在Chrome和Safari上，文字全部在一行上。如何在Firefox的一行中完成所有工作？

我不想对宽度进行硬编码，因为我希望这段代码足够通用，可以应用于我想要设置样式的任何菜单。

Answer 1

只需在div.select的宽度中添加！important，

<强> CSS：

.select {
  cursor: pointer;
  display: inline-block;
  position: relative;
  font-size: 16px;
  color: #fff;
  width: 220px !important;
  height: 42px;
}

FIDDLE

Answer 2

您的选择正在破裂，因为您的宽度不够宽。

快速解决方法是使用非中断空格（ ）。您可以硬编码，以编程方式添加它们，如下所示：

$(selectMenu).children('option').each(function(){
    $(this).html($(this).html().replace(" ", "&nbsp;"));
});

Example 1

真正的解决方法是修复你的宽度。您的计算错误是因为您没有使用outerWidth()并且因为您在测量后添加了类。首先添加您的课程，以便获得准确的衡量标准，然后使用outerWidth()代替width()，它应该有效。

$this.addClass('select-hidden');
var paddingWidth = $paddingCalculator.outerWidth() + 10;
$paddingCalculator.remove();
var selectWidth = $this.outerWidth() + paddingWidth;

Example 2

Answer 3

使用white-space属性控制文本换行的方式：

.select-styled {
  white-space: nowrap;
}

这会修复换行符，但现在文本会在三角形向下箭头下方流动...您可以在.select容器中添加一些填充，以便为箭头划出空间，使其不会重叠：< / p>

.select {
  padding-right: 30px;
}

Answer 4

我刚刚在你的javascript中修改了这两行，看起来它运行正常（Firefox + Mac）：

var paddingWidth = $paddingCalculator.outerWidth() + 15;

var selectWidth = $this.children().width() + paddingWidth;

填充一个只是为了美学

Answer 5

基本上会发生这种情况，因为您正在设置新包装元素<div class="select">的宽度，根据原始select的宽度进行计算：select元素上的jQuery width()函数返回Firefox和Chrome中的结果不同。因此，您最终会在Firefox中使用style="width: 111px;"，在Chrome中使用style="width: 134px;"。

您可以使用outerWidth获得更一致的结果，但它们也会略有不同，因为浏览器呈现的非样式select的宽度计算不可靠。

作为一个简单的解决方案，我认为@keithjgrant提出的CSS唯一方法绝对是最优雅的，但我还要white-space: nowrap;添加.select-options li。 N.b。：它不是一个完整的解决方案，因为你可能在其他一个option元素中有很长的文本，它会溢出并导致部分隐藏。

.select-styled {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: gray;
    padding: 11px 12px;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;

    /* this */
    white-space: nowrap;
    padding-right: 40px;
}

.select-options li {
    margin: 0;
    padding: 12px 0;
    text-indent: 15px;
    border-top: 1px solid #676767;
    -webkit-transition: all 0.15s ease-in;
    transition: all 0.15s ease-in;

    /* and this */
    white-space: nowrap;
}

作为更先进的解决方案，我会重新考虑更换样式的方式（220px硬编码值也不是一个好的解决方案）。

我还建议您查看我过去使用的名为Select2的替换库。

如何在Firefox中将文本保留在一行？

5 个答案: