gpt4 book ai didi

html - 悬停 `
`时如何使 `<input>`不展开

转载 作者:行者123 更新时间:2023-12-01 23:22:22 24 4
gpt4 key购买 nike

<分区>

代码

.topnav {
background-color: black;
overflow: hidden;
}

.topnav a {
box-sizing: border-box;
color: white;
display: inline-block;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
margin-top: 6px;
margin-bottom: 6px;
margin-right: 6px;
}

.topnav a:hover {
background-color: blue;
color: white;
}

.topnav a.active {
background-color: blue;
color: white;
}

.topnav input[type=text] {
display: inline-block;
float: right;
width: 20%;
padding: 14px;
border-radius: 1px;
background-color: white;
margin: 6px;
box-sizing: border-box;
outline: none;
transition: 0.1s;
}

.topnav input[type=text]:hover {
border: 3px solid blue;
}
<div id='menu' class='topnav'>
<a href='#1'>abcdefg</a>
<a href='#2'>abcdefg</a>
<a href='#3'>abcdefg</a>
<a href='#4'>abcdefg</a>
<input type='text' placeholder='Search here'>
</div>

目标

如您所见,当 <input> 悬停时,其边框会扩展 3 个像素。

但是,它也使 <div> 扩展,这不是我想要的。换句话说,我希望 <div> 在悬停时不展开。

我尝试过的

为了完成上述任务,我将 input<input> 的宽度设置为 <a>

As long as the value of width is auto, the element can have horizontal margin, padding and border without becoming wider than its container (unless of course the sum of margin-left + border-left-width + padding-left + padding-right + border-right-width + margin-right is larger than the container). The width of its content box will be whatever is left when the margin, padding and border have been subtracted from the container’s width.

The difference between width:auto and width:100% 中恢复

不幸的是,它没有用。我也不想使用固定宽度,例如,将 auto 宽度设置为 20 像素。虽然它有效,但它不会使 <input> 扩展,它太小了。

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com