gpt4 book ai didi

html -
在 html 布局中对齐不正确

转载 作者:行者123 更新时间:2023-11-28 01:52:06 25 4
gpt4 key购买 nike

body{
background: #d4d4d4;
width:100%;
font-family: Helvetica, Arial, sans-serif;
margin:0px;
padding:0px;
}

.container{
background:#ffffff;
margin: 0px auto;
width: 50%;
}



.header-1{
background-color:#000000;
padding:0px 20px 0px 20px;
height:40px;
}

.header-1 p{

float:right;
font-size: 12px;
color:white;
}

span{

font-size:11px;
position:relative;
right:-145px;
color:white;
}


.logo{
float: left;
width:149px;
height:26px;
padding-top:10px;
}

.delivery{
float:right;
color: black;
}

.loop{
clear:both;
text-align: center;
}

.brand{
list-style-type: none;
}

.brand li{
display:inline-block;
background: #000000;
color:white;
margin-left:-40px;
margin-right:30px;
font-weight:bold;
width:86px;
height:28px;
vertical-align: middle;

}

.header-banner{
width:600px;
height:40px;
}

.header-banner img{
width:570px;
}

.official h1{
margin-left: 30px;
}

.official p{
margin-left:30px;
font-size: 13px;
}

.order-info{
list-style-type:none;
}

.order-info li{
display:inline-block;
margin-right:30px;
}

.product-image{
float:left;
}

.product-image img{
margin-left:30px;
}

.product-container{
float:right;
}

.price-list{
list-style-type: none;
}

.price-list li{
display:inline-block;
margin-left:30px;
margin-right:3px;
}

.price-table{
float:right;
}

.price-total{
column-count: 2;
list-style-type: none;
column-gap:2px;
}

.line-4{
width:100%;
size:20;
color:black;
}
<div class="">
<ul class="order-info">
<li><h3>Order Info</h3><hr><p>Order#: 445501<br>
Order Date: 26 de junio de<br> 2017</p></li>
<li><h3>Bill To</h3><hr><p>Sergio Piana<br>
VIA CRESPI BENIGNO<br>
11111111111</p></li>
<li><h3>Ship To</h3><hr><p>Sergio Piana<br>
VIA CRESPI BENIGNO<br>
11111111111</p></li>
</ul>
</div>
<hr size="3" color="black">
<div>
<div class="product-image">
<img src="http://s7d3.scene7.com/is/image/LuxotticaRetail/679420297255_shad_qt?wid=150&hei=65&fmt=jpeg&qlt=65&op_usm=2.0,0.2,0,0&op_sharpen=0">
</div>
<div class="price-container">
<ul class="price-list">
<li><h4>Model</h4><hr><p>Model:<br>
SKU: 679420297255<br></p></li>
<li><h4>Quantity</h4><hr><p>1</p></li>
<li><h4>Quantity</h4><hr><p>191.60</p></li>
<li>Status:Cancelled</li>
</ul>
<hr>
</div>
<div class="price-table">
<ul class="price-total">
<li>Sub-total (includes VAT)</li>
<li>Packaging & Postage</li>
<li>Order Total</li>
<li>�191.60</li>
<li>�0.00</li>
<li>�191.60</li>
</ul>
</div>
</div>
<hr class="line-4">

我是 html 和 css 的新手。我一直在尝试使用 html 和 css 制作电子邮件模板,但不是马上就可以了。<hr>对齐方式不正确。我附上了关于外观应该如何的屏幕截图。

enter image description here

我应该使用相对和绝对定位还是正常的 float /ul 和 li.如果有人让我对此有所了解,那将很有帮助。谢谢。

最佳答案

我已经修复了 <hr>结盟。我还做了一些更改。

.price-list li{
display:inline-block;
margin-left:30px;
margin-right:3px;
vertical-align: text-top; //This is used to align all li from top
}

这里是 plunker:https://plnkr.co/edit/04dN4PDB3LjLHBjAOGbZ?p=preview

/* Styles go here */

body{
width:100%;
font-family: Helvetica, Arial, sans-serif;
margin:0px;
padding:0px;
}

.container{
background:#ffffff;
margin: 0px auto;
width: 50%;
}



.header-1{
background-color:#000000;
padding:0px 20px 0px 20px;
height:40px;
}

.header-1 p{

float:right;
font-size: 12px;
color:white;
}

span{

font-size:11px;
position:relative;
right:-145px;
color:white;
}


.logo{
float: left;
width:149px;
height:26px;
padding-top:10px;
}

.delivery{
float:right;
color: black;
}

.loop{
clear:both;
text-align: center;
}

.brand{
list-style-type: none;
}

.brand li{
display:inline-block;
background: #000000;
color:white;
margin-left:-40px;
margin-right:30px;
font-weight:bold;
width:86px;
height:28px;
vertical-align: middle;

}

.header-banner{
width:600px;
height:40px;
}

.header-banner img{
width:570px;
}

.official h1{
margin-left: 30px;
}

.official p{
margin-left:30px;
font-size: 13px;
}

.order-info{
list-style-type:none;
}

.order-info li{
display:inline-block;
margin-right:30px;
}

.product-image, .price-container{
float:left;
}

.price-container {
width: calc(100% - 200px);
}

.product-image {
width: 180px;
}

.product-image img{
margin-left:30px;
}

.product-container{
float:right;
}

.price-list{
list-style-type: none;
padding: 0;
margin: 0;
}

.price-list h4 {
margin-top: 0;
}

.price-list li{
display:inline-block;
margin-left:30px;
margin-right:3px;
vertical-align: text-top;
}

.price-table{
float:right;
}

.price-total{
column-count: 2;
list-style-type: none;
column-gap:2px;
}

.line-4{
width:100%;
size:20;
color:black;
}
<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>

<body>
<div class="">
<ul class="order-info">
<li><h3>Order Info</h3><hr><p>Order#: 445501<br>
Order Date: 26 de junio de<br> 2017</p></li>
<li><h3>Bill To</h3><hr><p>Sergio Piana<br>
VIA CRESPI BENIGNO<br>
11111111111</p></li>
<li><h3>Ship To</h3><hr><p>Sergio Piana<br>
VIA CRESPI BENIGNO<br>
11111111111</p></li>
</ul>
</div>
<hr size="3" color="black">
<div>
<div class="product-image">
<img src="http://s7d3.scene7.com/is/image/LuxotticaRetail/679420297255_shad_qt?wid=150&hei=65&fmt=jpeg&qlt=65&op_usm=2.0,0.2,0,0&op_sharpen=0">
</div>
<div class="price-container">
<ul class="price-list">
<li><h4>Model</h4><hr><p>Model:<br>
SKU: 679420297255<br></p></li>
<li><h4>Quantity</h4><hr><p>1</p></li>
<li><h4>Quantity</h4><hr><p>191.60</p></li>
<br>
<li>Status:Cancelled</li>
</ul>
<hr>
</div>
<div class="price-table">
<ul class="price-total">
<li>Sub-total (includes VAT)</li>
<li>Packaging & Postage</li>
<li style='border-top:1px solid black;margin-top:20px;padding-top:18px'>Order Total</li>
<li>�191.60</li>
<li >�0.00</li>
<li style='border-top:1px solid black;margin-top:18px;padding-top: 18px'>�191.60</li>
</ul>
</div>
</div>
<hr class="line-4">
</body>

</html>

关于html - <hr> 在 html 布局中对齐不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49862826/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com