Question

我正在尝试将测试徽标与我的标题一致，但它不起作用，我不知道如何描述问题所以我只是发布一个{{ 3}}。示例代码如下。

＆＃13;

.name {
      background-color: #b56663;
      font-family: Helvetica, Arial, sans-serif, "Times New Roman";
      color: white;
      height: 100px;
      margin: -8px 0 -5px -20px;
      padding: 20px 0 0 30px; /*Top right bottom left*/
      width: 99.815%;
    }
    
    .name h1 {
        margin: 20px 0 0 150px;
    }
    
    .logo {
        height: 100px;
        width: 100px;
        margin: -53.8px;
        padding: 0 0 0 75px;
        border: 0;
        display: inline;
    }

    body {
        background-color: gray;
    }

＆＃13;

<body>
  <img class="logo" src="images/logo.png" alt="logo">
  <div class="name">
    <h1>Lee Shewan</h1>
  </div>
</body>

＆＃13;

Answer 1

您可以像这样重构代码：

＆＃13;

body {
  background-color: gray;
}
.name {
  background-color: #b56663;
  font-family: Helvetica, Arial, sans-serif, "Times New Roman";
  color: white;
  height: 100px;
  padding: 20px 30px;
}

.name h1 {
  margin:10px 20px;
  display:inline-block;
  vertical-align:middle;
}

.name .logo {
  height: 100px;
  width: 100px;
  padding: 0 0 0 75px;
  display:inline-block;
  vertical-align:middle;
}

＆＃13;

<div class="name">
  <img class="logo" src="https://lorempixel.com/400/400/" alt="logo">
  <h1>Lee Shewan</h1>
</div>

＆＃13;

Answer 2

你去吧

.name {
  background-color: #b56663;
  font-family: Helvetica, Arial, sans-serif, "Times New Roman";
  color: white;
  height: 100px;
  padding: 20px 0 30px 0; /*Top right bottom left*/
}

.name h1 {
  display: inline-block;
}

.logo {
  height: 100px;
  width: 100px;
  margin: 0;
  padding: 0 0 0 75px;
  border: 0;
  display: inline-block;
}
body {
  background-color: gray;
}

<body>
   <div class="name">
     <img class="logo" src='https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg' alt="logo">
     <h1>Lee Shewan</h1>
   </div>
 </body>

使用文本

2 个答案: