css HTML边框对齐

g6ll5ycj 于 2023-06-07 发布在其他

关注(0)|答案(1)|浏览(188)

我希望第二个边框正好在电话图像下面，就像Gmail下面的那个一样。我不知道我做错了什么，但我无法调整它。真的很感激帮助：）

.b1 {
  border: 1px solid rgba(255, 0, 0, 0.464);
  height: 280px;
  width: 224px;
  margin-left: 18%;
  margin-right: 2%;
  margin-top: 1.2%;
  float: left;
}

.nav {
  background-color: crimson;
  height: 60px;
  display: flex;
}

<div class="nav">
  <a href="movie.html"> <img style=" margin-left: 10px; margin-top: 12px; float: left;  " src="images/back.png" width="30px" height="30px">
  </a>
  <h1 style="margin-left: 20px; margin-top: 5px; font-family:Verdana; color: white; ">CineScape</h1>
</div>

<img style="height: 60px; width: 60px; margin-left: 24%; margin-top: 12%; display: inline;" src="images/gmail.png">
<img style="height: 60px; width: 60px; margin-left: 20%; margin-top: 12%;   display: inline;" src="images/telephone.png">
<img style="height: 60px; width: 60px; margin-left: 20%; margin-top: 12%; display: inline; " src="images/linkedin.png">
<br>
<div class="b1">
  <p style="color: white;padding-left: 9px;padding-top: 4%;  font-family: Verdana ;"><b> cinescape@gmail.com </b>
  </p>
</div>
<div class="b1">
  <p style="color: white;padding-left: 9px;padding-top: 4%;  font-family: Verdana ;"><b>042-8382999
    </b>
  </p>
</div>

enter image description here
尝试了我上面分享的代码和更多的东西。但不能像第一个边框那样对齐

css

来源：https://stackoverflow.com/questions/76414419/html-border-alignment

1条答案

按热度按时间

txu3uszq1#

你给左边距'%'

<img style="height: 60px; width: 60px; margin-left: 24%; margin-top: 12%; display: inline;" src="images/gmail.png">

所以在不同宽度下不能正常工作，你可以用它来代替。

<html>
<head>
    <link rel="stylesheet" href="cont.css"> 
        <style>
        .nav{
            background-color: crimson;
            height: 60px;
            display: flex; 
        }
        p {
            border: 1px solid rgba(255, 0, 0, 0.464);
            height: 280px;
            width: 224px;
        }
        .container {
            display: flex;
            flex-direction: row;
            justify-content: center;
            margin-top:1.2%;
            gap:40px;
        }
        .b1 {
            display:flex;
            flex-direction:column;
            align-items: center;
        }
        b {
            color:black;
        }
       </style>
       <div class="nav">
       <a href="movie.html" > <img style=" margin-left: 10px; margin-top: 12px; float: left;  " src="images/back.png" width="30px" height="30px" >  
       </a>
       <h1 style="margin-left: 20px; margin-top: 5px; font-family:Verdana; color: white; "  >CineScape</h1>
       </div>
</head>

<body>
    <div class="container">
        <div class="b1">
            <img style="height: 60px; width: 60px;" src="images/gmail.png">
            <p style="color: white;padding-left: 9px;padding-top: 4%;  font-family: Verdana ;">
                <b> cinescape@gmail.com </b>
            </p>
        </div>
        <div class="b1">
            <img style="height: 60px; width: 60px;" src="images/telephone.png">
            <p style="color: white;padding-left: 9px;padding-top: 4%;  font-family: Verdana ;">
                <b> 042-8382999 </b>
            </p>
        </div>
        <div class="b1">
            <img style="height: 60px; width: 60px;" src="images/linkedin.png">
        </div>
    </div>

    
</body>
</html>

赞(0）回复(0）举报 2023-06-07

我来回答

css HTML边框对齐

1条答案

相关问题

热门标签

最新问答