选择选项未在选择元素下对齐答案

【问题标题】：Select options not aligning under select element选择选项未在选择元素下对齐
【发布时间】：2021-11-08 06:20:29
【问题描述】：

我有以下 HTML：

<!doctype html>
<html>
<body>
 <div style="width:501px;background:#EEE;">
  <div style="width:100%;max-width:400px;margin:auto;background:#DDD;">
   <select style="width:200px;box-sizing:border-box;">
    <option>test1</option>
    <option>test2</option>
   </select>
  </div>
 </div>
</body>
</html>

由于容器设置为奇数并且选择的父 div 设置为自动边距，因此无法对齐它。结果是选项列表在选择下没有正确对齐。这发生在 FF 88.01 中，但不在 Edge 93 中：screenshot

我可以通过将 select 设置为 199px 或将容器设置为 500px 来解决它，但是还有其他不涉及牺牲宽度的解决方案吗？

编辑：即使没有所有容器也会发生这种情况。即使我将选择放在 100% 宽度上，它本身也放在一个空白页面上。这将是 Firefox 的事情，而不是我的代码。根据视口，有时会错位，有时不会。

注意：我在 jsfiddle 中看到了错误，但是在此处运行 sn-p 不会重现该问题，无论视口如何。我想我会忍受它。我无法更改它 - 奇怪的浏览器行为。

$('#msg').text($(window).width());
$(window).resize(function() {
  $('#msg').text($(window).width());
});

select{width:100%;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
 <option>test1</option>
 <option>test2</option>
</select>
<div id="msg"></div>

【问题讨论】：

标签： html css select offset option

【解决方案1】：

尝试将内联 CSS 与样式标签混为一谈是没有帮助的，而且可能会产生问题。如果这是一个独特的项目，请给它一个 CSS id 名称。然后你可以弄乱它的位置：

html 保存元素（项目）

<div id="panda">

css 展示了如何使它看起来

#panda { width: 100%; background: red }

将 HTML 视为房屋的建筑； CSS 是油漆和装饰方面。

我还注意到一件事是您使用了过时的尺寸信息 [像素]，这可能没有帮助。设置像素宽度 [max-width:400px] 和“100%”的需求可能不兼容。任何时候您都可以使用 % 或 em 来表示尺寸，这对于您正在使用的所有显示屏幕来说都是一个精确的测量值。请查看 % size 和 em size 并查看后面的 RWD 文章和 viewport 文章：

https://www.w3schools.com/css/css_rwd_intro.asp

这将为您提供基本概念。像素 [固定大小] 真的很臭，很难做你想做的事。把它们想象成是用混凝土浇铸的，它们可能会破坏 CSS 的流程。除非非常非常必要，否则我会避免使用它们 [有时图像高度无论使用何种设备都会保持一致 - 它可以是在智能手机、平板电脑或笔记本电脑。] 几乎每次您想说 pixels schmixels（90 年代已经结束）时，都要使用灵活的系统，例如 % 或 em。请注意图像/分辨率的最大尺寸[如果你告诉它填满屏幕，小文件会看起来很糟糕。]

找出你的东西在流程中与哪里相关的一种方法是用荧光笔颜色打破设计，这样你就可以看到这些东西在拼图中的位置。为元素或页面部分提供红色或亮色背景或边框——如果您可以使用颜色来查看事物边缘的位置并在浏览器中加载页面，这通常会使您弹出问题。然后您可以修复它并从 CSS 中取出荧光笔颜色。

【讨论】：

感谢您的回复 - 非常感谢。内联样式的原因是因为它只是为了测试，打字很好而且简短，而不是在 html 文件和 css 文件之间来回切换。不幸的是，对于这个项目，我必须使用像素，因为广告以像素为单位有一定的宽度，而且它是一个旧网站，无论如何主要使用像素，但我绝对理解你的意思。
哦，这很有趣！我从未使用内联来测试样式更改。我习惯在 Komodo 中打开几个标签页。 ^_^ 如果我不确定更改是否会破坏样式，我将使用保存的副本来 bash 看看输出是什么样的。对于较旧/遗留的网站，可能都会出现一个转折点，即它们会老化并且无法正常工作，因为大多数网络都在移动设备上运行。当我找到一个时，我会畏缩。我总是尝试看看人们是否愿意迁移到更现代的设计。 ^_^
哈哈是的，这是一个响应式网站——它只是使用 CSS 媒体查询。移动设备上不存在该问题（另外，无论如何，选择在移动设备上的处理方式不同）。但是对于桌面固定尺寸的广告会显示，这迫使我使用像素。
是的广告和横幅广告真的很烂:(抱歉不知道你有这么多复杂的部分在移动，所以这个问题似乎低估了正在发生的一切，看起来更像是基本问题。也许得到一些引导代码为了列系统的好处？CSS @media 查询是通过 Bootstrap 吗？这是我唯一的想法。
不，没关系。我创建了一个简单的 html 测试文件（根据帖子，根本没有 css 或 div - 纯粹是 body 和一个 select 元素），它也发生在那里，并且仅在某些屏幕宽度上再次发生。因此，这不是我的代码中的问题，而是 Firefox 中的故障。虽然我很烦，但我会离开它。

【解决方案2】：

仅适用于 Firefox 的锚标记示例 -- 应用于所需元素 --


@-moz-document url-prefix() {
    a {
        margin: 0;
    }
}

【讨论】：