Select 列表文本 position 点击页面任意位置或浏览器调整大小的变化

Question

I have a select input field on my page.我的页面上有一个 select 输入字段。 When I reload the page, the text "Player" is aligned like I wanted.当我重新加载页面时，文本“播放器”按照我想要的方式对齐。 But as soon as I click anything on the page or resize the browser window, the text slides down a little bit.但是只要我点击页面上的任何内容或调整浏览器 window 的大小，文本就会向下滑动一点点。 How can I fix this?我怎样才能解决这个问题？

SEE IMAGE见图像

I am using the W3.CSS framework and some custom css. To get the css attributes I used inspect and right clicked the element to copy the styles.我正在使用 W3.CSS 框架和一些自定义 css。为了获取 css 属性，我使用检查并右键单击该元素以复制 styles。

-webkit-text-size-adjust: 100%;
box-sizing: inherit;
font: inherit;
margin: 0;
text-transform: none;
border-right: 1px solid #ccc!important;
color: #000 !important;
background-color: #f5f7f8 !important;
padding: 8px 16px;
float: left;
border: none;
display: block;
outline: 0;
height: 30px;
width: 120px;
border-radius: 5px 0px 0px 5px;

This is the select input这是 select 输入

<select class="w3-select w3-bar-item w3-theme-l5 w3-border-right" name="search_kind" style="height: 30px; width:120px; border-radius: 5px 0px 0px 5px;">
  <option value="1" selected="">Player</option>
  <option value="2">Alliance</option>
</select>

Answer 1

Don't specify the height in <select> .Rest is fine You can see my code below不要在<select>中指定高度 .Rest 可以你可以在下面看到我的代码

 <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <select class="w3-select w3-bar-item w3-theme-l5 w3-border-right" name="search_kind" style=" width:120px; border-radius: 5px 0px 0px 5px;"> <option value="1" selected="">Player</option> <option value="2">Alliance</option> </select> </body> </html>

Select 列表文本 position 点击页面任意位置或浏览器调整大小的变化

问题描述

1 个解决方案

解决方案1
0 2023-01-13 13:16:14

Select 列表文本 position 点击页面任意位置或浏览器调整大小的变化

问题描述

1 个解决方案

解决方案1 0 2023-01-13 13:16:14

解决方案1
0 2023-01-13 13:16:14