html - 当我尝试插入图像时，边框和输入会移动

问题描述

我对编程真的很陌生。每当我尝试使用它插入图像时，它都会向下移动边框并向下输入。然后我必须将它们移回以匹配文本，如下图所示。我在 CSS 中使用“margin：”来做到这一点。为什么我尝试插入时边框和输入会向下移动？有没有比使用 :margin:" 更简单的方法来定位边框等内容？

CSS（用于导航栏和输入）：


#navBar {
    border: 2px solid black;
    height: 30px;
    width: 43%;
    margin-top: -42px;
    margin-left: 405px;
    padding: 5px;
}

#searchInput {
    margin-top: 3px;
    margin-left: 1250px;
    height: 35px;
    width: 185px;
    border-radius: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    outline: none;
}

HTML：



<!DOCTYPE html>
<html lang="en">
<head>
 <title>Restaurant</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href= "{{ url_for('static', filename='style.css') }}">
 <link rel="preconnect" href="https://fonts.gstatic.com">
 <link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css2?family=Roboto&family=Ubuntu&display=swap" rel="stylesheet">
</head>
<body>
  
<img src="/static/searchImage.png" id="searchImage">
<div id="search">
  <input id="searchInput" type="text"> 
</div>

<div id="navBar">
 <a href="deals">
 <button id="dealsButton">Deals</button>
</a>

<a href="burgers">
  <button id="burgersButton">Burgers</button>
 </a>

 <a href="drinks">
  <button id="drinksButton">Drinks</button>
 </a>

 <a href="sides">
  <button id="sidesButton">Sides</button>
 </a>

 <a href="desserts">
  <button id="dessertsButton">Desserts</button>
 </a>
</div>
</body>
</html>

图片：

在插入图像之前，边框与文本完全对齐，输入就在边框旁边。但是当我插入时会发生这种情况。

标签： htmlcssbordermargin

html - 当我尝试插入图像时，边框和输入会移动

问题描述

解决方案

推荐阅读