Question

因此，我想为NerdHub（YouTube频道）写一个粉丝页面，并且因为“搜索...”与（NerdHub的）徽标不在同一行而陷入困境。

现在您可以看到它像这样：

它应该像这样：

我阅读了一份副本，但是display: inline-block;也没有帮助我。

所有文件：https://drive.google.com/drive/folders/1Fl4MIf6otZq8w_xm17GD5NY9wbj5pM7G?usp=sharing

<html>
<head>
	<title>Nerdhub</title>
</head>
<body>
<div class="con">
    <div id="fel">
    </div>
</div>



<div id="asd">
    <form><input type="text" name="1" value="Search..."></form> 
</div>

<div id="img">
    <img src="nerdhub.jpg" width="200px">
</div>

<div id="adbytelekom">
    <p class="a">Remove Ads</p>
    <img src="adbytelekom.jpg">
    <div id="ad">
        <p class="a">Ads by Telekom</p>
    </div>
</div>

<style type="text/css">
    body {
        background-color: black;
    }

    input[type="text"] {
        background-color: 4f4f4f;
        color: gray;
        padding: 5px 300px;
    }

    p.a {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
    }

    #img {
        text-align: top-left;
    }

    #asd {
        text-align: center;
    }

    #reklambytelekom {
        margin-top: 0px;
        text-align: right;
        margin-right: 100px;
        color: white;
    }

    #ad {
        margin-right: 115px;
    }

    #fel {
        color: white;
        text-decoration: none;
    }
 </style>
 </body>
 </html>

Answer 1

最简单的解决方案是添加display:flex。默认情况下，flex连续渲染其直接子级。我鼓励您阅读有关弹性属性here的更多信息。

body {
  background-color: black;
}

input[type="text"] {
  background-color: 4f4f4f;
  color: gray;
  padding: 5px 300px;
}

p.a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

#img {
  text-align: top-left;
}

#asd {
  text-align: center;
}

#reklambytelekom {
  margin-top: 0px;
  text-align: right;
  margin-right: 100px;
  color: white;
}

#ad {
  margin-right: 115px;
}

#fel {
  color: white;
  text-decoration: none;
}

.flex{
  display:flex;
}

<html>

<head>
  <title>Nerdhub</title>
</head>

<body>
  <div class="con">
    <div id="fel">
    </div>
  </div>

  <div class="flex">
    <div id="img">
      <img src="nerdhub.jpg" width="200px">
    </div>

    <div id="asd">
      <form><input type="text" name="1" value="Search..."></form>
    </div>


    <div id="adbytelekom">
      <p class="a">Remove Ads</p>
      <img src="adbytelekom.jpg">
      <div id="ad">
        <p class="a">Ads by Telekom</p>
      </div>
    </div>
  </div>



</body>

</html>

Answer 2

Try this one instead of your code...

<html>
<head>
    <title>Nerdhub</title>
</head>
<body>
    <div class="con">
        <div id="fel">
            <div id="img">
                <img src="nerdhub.jpg" width="200px">
            </div>
        </div>
    </div>



    <div id="asd">
        <form><input type="text" name="1" value="Keresés..."></form> 
    </div>



    <div id="reklambytelekom">
        <p class="a">Remove Ads</p>
        <img src="reklambytelekom.jpg">
        <div id="ad">
            <p class="a">Ads by Telekom</p>
        </div>
    </div>
    <!--file:///D:/Don%C3%A1t/Programoz%C3%A1s/wamp/nerdhub.com/Nerdhub.html -->
    <style type="text/css">
        body {
            background-color: black;
        }
        .con,#asd{float: left;}
        form{width: 80%;margin: 0 auto;}
        input[type="text"] {
            background-color: 4f4f4f;
            color: gray;
            padding: 5px 300px;
            margin: 15px 0;
        }

        p.a {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 12px;
        }
        #img {
            text-align: top-left;
        }
        #asd {
            text-align: center;

        }

        #reklambytelekom {
            margin-top: 0px;
            text-align: right;
            margin-right: 100px;
            color: white;
        }

        #ad {
            margin-right: 115px;
        }
        .con > * {
            display: inline-block;
        }

        #fel {
            color: white;
            text-decoration: none;
        }
    </style>




</body>
</html>

Answer 3

简单的方法是使用flex，如上面提到的答案。您可以使用align-items属性将框内的项目对齐。只需在一行中希望添加的元素周围添加另一个div，然后为其赋予以下样式：

#wrapper {
  display: flex;
  align-items: center;
}

另外，由于您想在徽标的左侧，所以应该在搜索栏之前添加徽标。

<div id="wrapper">    
  <div id="img">
    <img src="nerdhub.jpg" width="200px">
  </div>

  <div id="asd">
    <form><input type="text" name="1" value="Search..."></form> 
  </div>
</div>

Answer 4

* {
  box-sizing: border-box;
  position: relative;
}

body {
  background-color: black;
  margin: 0;
  padding: 0;
}

header {
  align-items: center;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  grid-gap: 140px;
  overflow: hidden;
  padding: 20px 60px;
  width: 100%;
}

input[type="text"] {
  background-color: 4f4f4f;
  color: gray;
  padding: 5px 300px;
}

section {
  width: 100%;
}

aside {
  padding: 30px;
  position: absolute;
  right: 0;
}

p.a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

#asd {
  text-align: center;
}

#reklambytelekom {
  margin-top: 0px;
  text-align: right;
  margin-right: 100px;
  color: white;
}

#ad {
  margin-right: 115px;
}

.con>* {
  display: inline-block;
}

#fel {
  color: white;
  text-decoration: none;
}

<div class="con">
  <div id="fel"></div>
</div>
<header>
  <div id="img">
    <img src="https://drive.google.com/uc?export=view&id=1TR9UwuFvWO7ZAFkYjl9LQ5wNEKpvOzEM" width="200px">
  </div>
  <div id="asd">
    <form><input type="text" name="1" value="Keresés..."></form>
  </div>
</header>
<section>
  <aside>
    <div id="reklambytelekom">
      <p class="a">Remove Ads</p>
      <img src="https://drive.google.com/uc?export=view&id=14CKiNux7_cpRXiM48Sajr7DV0H5ikjFC">
      <div id="ad">
        <p class="a">Ads by Telekom</p>
      </div>
    </div>
  </aside>
</section>

如何在搜索栏旁边对齐图像

4 个答案: