HTML <select> 项在 Razor 页面上使用相同代码以两种不同方式表现

Question

我正在尝试通过开发一个简单的项目来学习 ASP Core 和 Razor，以向用户呈现不同时态的动词变位。作为项目的一部分，我在开始时有一个选项页面，其中有几个下拉列表（使用 HTML select 组件）到 select 要呈现的动词和呈现它们的顺序英寸

其中一个下拉菜单（selector 的顺序）按我的预期工作，即它显示单个值和它右侧的下拉箭头，单击时会打开列表（见图以下）。另一个（动词 selector）在一个框中显示 4 个项目，列表右侧有一个滚动条，没有下拉列表 selector。两者都使用相同的代码和基础数据，我不明白为什么它们的行为不同。我希望它们都像下拉菜单一样（单行下拉菜单 select 或向右）。

有谁知道我怎样才能让他们以同样的方式行事？下面包含屏幕截图和代码段。

这是两个 select 组件的屏幕截图。动词 selector 在上面，顺序 selector 在下面。

动词 selector 具有以下 HTML（它构成一组选项的一部分，因此具有单选输入，但这些组件之间没有交互。我已经注释掉了无线电输入，它对 select 组件的显示方式没有影响）：

<td>
    <input type="radio" name="selverbs" value="sel" id="sel" onclick="javascript:topenable()" />
    <label for="top">Selected verbs </label>
    <select name="verbs" asp-for="selectedverbs" asp-items="Model.verbs"></select>
</td>

订单select或有以下HTML:

<td>
    <label>Verb order: </label>
    <select name="order" asp-for="selectedorder" asp-items="Model.order"></select>
</td>

select或都使用带有 SelectListItems 的列表。

动词 selector 的数据是这样创建的：

public List<SelectListItem> GetVerbs()
{
    List<SelectListItem> results = new List<SelectListItem>();
    int rank = 1;
    foreach (string s in collection.AsQueryable().OrderBy(doc => doc.Rank).GroupBy(doc => doc.Rank).Select(g => g.First().Infinitive))
    {
        results.Add(new SelectListItem(s, rank.ToString(CultureInfo.CurrentCulture)));
        rank++;
    }
    return results;
}

订单数据select或生成如下：

[BindProperty]
public List<SelectListItem> order { get; } = new List<SelectListItem>
{
    new SelectListItem { Value = "1", Text = "forward" },
    new SelectListItem { Value = "-1", Text = "reverse" },
    new SelectListItem { Value = "0", Text = "random"  }
};

我已经尝试在动词 selector 上设置 size="1" 并且这没有任何区别。此组件仍显示有滚动条（请参见下面的屏幕截图）。

我认为我的 CSS 文件中没有任何内容会导致这种差异，但我对 CSS 了解不多，因此在下面包含了完整的文件。这主要是 Visual Studio 在我设置项目时创建的默认文件，并添加了一些内容。

/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
  color: #0366d6;
}

.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}
/* Body layout 
-------------------------------------------------- */
div{
    color: black;
    font-weight:normal;
}

select {
    margin-right: 20px;
    overflow-y: auto;
    text-align: left;
    width: 55px;
}

#incorrect {
    color: red;
    font-weight: bold;
}
#correct {
    color: forestgreen;
    font-weight: bold;
}

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: none;
}

/* Tooltip text */
    .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: #555;
        color: #fff;
        text-align: center;
        padding: 5px 0;
        border-radius: 6px;

        /* Position the tooltip text */
      position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -60px;

        /* Fade in tooltip */
      opacity: 0;
        transition: opacity 0.3s;

    }

        /* Tooltip arrow */
        .tooltip .tooltiptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }

    /* Show the tooltip text when you mouse over the tooltip container */
    .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;

    }

/* Sticky footer styles
-------------------------------------------------- */
html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px; /* Vertically center the text there */
}

我已经在 Chrome、IE 和 Edge 上对此进行了测试，每次都得到相同的结果。

Answer 1

事实证明这不是尺寸问题，而是约束力问题。它似乎是由页面关联的 c# 文件中 return 值 (selectedverbs) 的绑定引起的，如下所示：

[BindProperty]
public List<SelectListItem> selectedverbs { get; }

因为这将采用多个 return 值，所以它针对 select 组件设置 multiple。当我将其更改为 public string selectedverbs { get; } 时，select 组件将作为标准下拉菜单运行，大概只允许选择一个项目。

HTML <select> 项在 Razor 页面上使用相同代码以两种不同方式表现

HTML <select> item behaving in two different ways with same code on Razor page

html

css

razor-pages