Question

好吧，像往常一样，我把头发留下来，而不是在线找到解决方案，作为最后的手段来到这里。

有一个包含一行和三个单元格的简单表格。两个单元格内部是包含<select>和两个按钮的字段集（我喜欢外观）。除了选项的文字被截断外，一切看起来都像我想要的那样。

我已经尝试调整select的大小，但是在调整选项本身时找不到任何参考。

我做错了什么？

HTML：

<div id='tabs-1' style='width: 95%;'>
  <table style='width: 98%; margin-left: auto; margin-right: auto;'>
    <tr>
      <td style='width: 33%;text-align: center;'>
        <fieldset style='height: 300px;width: 90%;'>
          <legend>Manual</legend>
          <br>
          <div style='text-align: center;'>
            <a href="#" onclick='getPage("SheriffManual")' target="_self">
              <img src="images/manualIcon.jpg" alt='Manual' height="65">
              <br>
              Sheriff's Policy and Procedure
            </a>
          </div>
        </fieldset>
      </td>
      <td style='width: 33%;text-align: center;'>
        <fieldset style='height: 300px;width: 90%;'>
          <legend>Memorandum</legend>
          <br>
          <div style='width: 100%;" text-align: center;'>
            <select style='width: 90%;' size="8" id='selSheriffMemorandum' name="selSheriffMemorandum" value="">
              <option value='memorandum/MINIMUM APPLICANT STANDARDS FOR DETENTION, PEACE OFFICERS AND TELECOMMUN.pdf'>Minumum Applicant Standards</option>
              <option value='memorandum/Memorandum EMPLOYEE SMOKING AREAS.pdf'>Employee Smoking Areas</option>
            </select>
            <br><br>
            <div style='float: left; margin-left: 75px;'>
              <button>View</button>
            </div>
            <div style='float: right; margin-right: 75px;'>
              <button>Download</button>
            </div>
          </div>
        </fieldset>
      </td>
      <td style='width: 33%;text-align: center;'>
        <fieldset style='height: 300px;width: 90%;'>
          <legend>Directives</legend>
          <br>
          <select size='8' style='width: 90%' id='selSheriffDirectives' name='selSheriffDirectives' value=''>
            <option value='directives/SHERIFFS DIRECTIVE NO  2015-09-01 WORK PLACE VIOLENCE.pdf'>Workplace Violence</option>
            <option value='directives/Directive ANNUAL TUBERCULOSIS SCREENING.pdf'>Annual Tuberculosis Screening</option>
            <option value='directives/Sheriffs Directive No. 02-03 - Bereavement Leave.pdf'>Bereavement Leave</option>
            <option value='directives/SHERIFFS DIRECTIVE Mental Health Pre-Screening and Diversion NO  2015-01.pdf'>Mental Health Pre-Screening</option>
          </select>
          <br><br>
          <div style='float: left; margin-left: 75px;'>
            <button>View</button>
          </div>
          <div style='float: right; margin-right: 75px;'>
            <button>Download</button>
          </div>
        </fieldset>
      </td>
    </tr>
  </table>
</div>

结果：

更新：我为该页面取出了所有CSS和javascript，并按预期选择了渲染。把所有东西都放回来之后，我意识到导致问题的是jquery.ui.js - 我正在使用jquery的标签，并且它将<select>选项宽度设置为与标签宽度相同。现在我只需要找出我需要覆盖jquery的内容。

Answer 1

如何向选择元素添加滚动条？

<select style='width: 90%; overflow: scroll' size="8" id='selSheriffMemorandum' name="selSheriffMemorandum" value="">
...
</select>

Answer 2

更改body { padding-top: 40px; } header { background: #f5b335; height: 40px; position: fixed; top: 0; transition: top 0.2s ease-in-out; width: 100%; } .nav-up { top: -40px; } main { background:url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPklEQVQYV2O8dOnSfwYg0NPTYwTRuAAj0QqxmYBNM1briFaIzRbi3UiRZ75uNgUHGbfvabgfsHqGaIXYPAMAD8wgC/DOrZ4AAAAASUVORK5CYII= ) repeat; height: 2000px; } footer { background: #ddd;} * { color: transparent}

的height或padding

<option>

Answer 3

原来这是一个简单的解决方案（由Select box truncating text when body font size changed via javascript on document ready in IE 9提供）：

$('select').append(' ');

强制重绘选择。

HTML选择关闭文本

3 个答案: