Question

我要创建一个在悬停时激活的搜索栏，否则它不会出现。为此，我尝试了很多次，但是代码运行不佳，因为最近几个月我开始使用CSS。我希望它们完全对齐，即div应该消失，搜索栏必须覆盖div覆盖的确切部分。

我已经尝试使用填充和CSS边距，但是当屏幕尺寸和宽度发生变化时，它并没有按照我的要求完美地工作。

.element1, .element2, .element3, .element4, .element5, .element6, .element7 {
    background: -webkit-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* Chrome 10+, Saf5.1+ */
    background:    -moz-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* FF3.6+ */
    background:     -ms-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* IE10 */
    background:      -o-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* Opera 1        1.10+ */
    background:         linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* W3C */
    border-radius:15%;
    max-height:110px;
    width: 7.2rem;
    font-family:"Nuntino";
    color: white;
    display:flex;
    opacity: 0.7;
    box-shadow:0.5px 0.5px 0.5px 0.5px #3A6073;
    text-align:center;
    align-items: center;
    justify-content: center;
}

<div class="Box">                                                
  <div class="element1" ><h1>Y</h1></div>
  <div class="element2" ><h1>O</h1></div>
      <div class="element3" ><h1>J</h1></div>
    <div class="element4" ><h1>A</h1></div>
      <div class="element5" ><h1>N</h1></div>
    <div class="element6" ><h1>A</h1></div>
</div>
<input type="text" />

Answer 1

在您的div中使用position：reative属性，并输入“应用边距”和“填充”（如果这不起作用），然后也使用“ overflow：hidden”（相对位置隐藏）

在div上完美对齐INPUT

1 个答案: