对齐框彼此相邻
我想使框和箭头都整齐整齐。我尝试过使用padding之类的方法，但是它似乎运行不佳。
HTML：
<div class="listBox">
<p>Course ID: COMP108<br/>Course Name: Computer_Science_Industrial<br/>_Experience_Reflective_Learning_I<br/>Credits: 3<br/>Pre-Requisite: NONE<br/>Co-Requisite: NONE</p>
</div>
<img src="../img/arrowRight.png" width="4%" style="padding: 40px;">
<div class="listBox">
<p>Course ID: COMP201<br/>Course Name: Computer_Science_Industrial<br/>_Experience_Reflective_Learning_II<br/>Credits: 3<br/>Pre-Requisite: MATH201<br/>Co-Requisite: NONE</p>
</div>
<img src="../img/arrowRight.png" width="4%" style="padding: 40px;">
<div class="listBox">
<p>Course ID: COMP248<br/>Course Name: Object-Oriented_<br/>Programming_I<br/>Credits: 3<br/>Pre-Requisite: MATH204<br/>Co-Requisite: COMP201</p>
</div>
CSS：
.listBox{
background-color: rgba(245, 246, 250, 0.7);
border-radius: 15px;
display: inline-block;
width: 25%;
margin-right: -4px;
z-index: -1;
padding: 8px;
}
.listBox p{
font-size: 11px;
font-family: Courier;
}
4 个答案:
答案 0 :(得分：1)
Flexbox可能会使这项工作更好。
将容器元素设置为display: flex，然后从width: 25%中删除display: inline-block和.listBox。您可能要考虑在flex-grow: 1;上添加flex-basis: 0;和.listBox，以使它们具有相同的宽度。
CSS：
.listContainer {
display: flex;
}
.listBox{
background-color: rgba(245, 246, 250, 0.7);
border-radius: 15px;
z-index: -1;
padding: 8px;
flex-grow: 1;
flex-basis: 0;
}
.listBox p{
font-size: 11px;
font-family: Courier;
}
HTML：
<div class="listContainer">
<div class="listBox">
<p>Course ID: COMP108<br/>Course Name: Computer_Science_Industrial<br/>_Experience_Reflective_Learning_I<br/>Credits: 3<br/>Pre-Requisite: NONE<br/>Co-Requisite: NONE</p>
</div>
<img src="../img/arrowRight.png" width="4%" style="padding: 40px;">
<div class="listBox">
<p>Course ID: COMP201<br/>Course Name: Computer_Science_Industrial<br/>_Experience_Reflective_Learning_II<br/>Credits: 3<br/>Pre-Requisite: MATH201<br/>Co-Requisite: NONE</p>
</div>
<img src="../img/arrowRight.png" width="4%" style="padding: 40px;">
<div class="listBox">
<p>Course ID: COMP248<br/>Course Name: Object-Oriented_<br/>Programming_I<br/>Credits: 3<br/>Pre-Requisite: MATH204<br/>Co-Requisite: COMP201</p>
</div>
</div>
答案 1 :(得分：0)
只是又快又脏，没有调整宽度等，因此文本断了。查看with open(csv_file, 'w') as csvfile:
writer = csv.DictWriter(csvfile, fieldnames=csv_columns1) #csv_columns1 is a list of value to become as heading
writer.writeheader()
for data in vals['details']:# values for the header
writer.writerow(data)
writer = csv.DictWriter(csvfile, fieldnames=csv_columns2)#csv_columns1 is a list of value to become as heading
writer.writeheader()
writer = csv.DictWriter(csvfile, fieldnames=csv_columns)#csv_columns1 is a list of value to become as heading
writer.writeheader()
for data in vals['OrderLine']:# values for the header
writer.writerow(data)
print(os.system('pwd'))
Output_Directory = "ftp_path_to_store_file"
username = "ftp_user_names"
password = "ftp_password"
ftp_ip = "ftp_host_ip"
a1 = 'STOR %s.csv' % (order.name)
try:
ftp = FTP(ftp_ip)
ftp.login(username, password)
ftp.cwd(Output_Directory)
with open(csv_file, "rb") as f:
ftp.storbinary('STOR ' + os.path.basename(csv_file), f)
中的样式。此解决方案使用flexbox，请随时进行查看。
body {}body {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.listBox{
background-color: rgba(245, 246, 250, 0.7);
border-radius: 15px;
display: inline-block;
width: 25%;
margin-right: -4px;
z-index: -1;
padding: 8px;
}
.listBox p{
font-size: 11px;
font-family: Courier;
}
img {
padding: 0 40px;
}
答案 2 :(得分：0)
在这种情况下，您可以使用CSS flex。在示例中，我使用<div class="spacer">更改了您的图片，但您也可以使用图片（给它们提供类spacer）
/* new */
.list {
width: 100%;
display: flex;
justify-content: space-between;
background-color: #579C81;
}
.list .spacer {
margin: 0 10px;
max-width: 10%;
align-self: center;
}
.listBox{
background-color: rgba(245, 246, 250, 0.7);
border-radius: 15px;
width: 25%;
padding: 8px;
/* changed */
display: flex;
/* new */
flex: 1 auto;
}
.listBox p {
font-size: 11px;
font-family: Courier;
/* new */
flex: 1 0 auto;
word-break: break-all;
max-width: 100%;
}
<!-- added new wrapper div -->
<div class="list">
<div class="listBox">
<p>Course ID: COMP108<br/>Course Name:
Computer_Science_Industrial<br/>_Experience_Reflective_Learning_I<br/>Credits: 3<br/>Pre-Requisite: NONE<br/>Co-Requisite: NONE</p>
</div>
<div class="spacer"> >> </div>
<div class="listBox">
<p>Course ID: COMP201<br/>Course Name: Computer_Science_Industrial<br/>_Experience_Reflective_Learning_II<br/>Credits: 3<br/>Pre-Requisite: MATH201<br/>Co-Requisite: NONE</p>
</div>
<div class="spacer"> >> </div>
<div class="listBox">
<p>Course ID: COMP248<br/>Course Name: Object-
Oriented_<br/>Programming_I<br/>Credits: 3<br/>Pre-Requisite: MATH204<br/>Co-Requisite: COMP201</p>
</div>
</div>
答案 3 :(得分：0)
您可以执行以下操作：
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.listBox{
width: 100%;
}
.listBox:after{
content: '';
display: table;
clear: both;
}
.listBox li {
position: relative;
float: left;
width: 33.3333%;
list-style: none;
padding: 8px 16px;
}
.listBox li div {
background-color: #999;
border-radius: 15px;
width: 100%;
display: flex;
align-items: center;
}
.listBox p{
padding: 8px;
font-size: 11px;
font-family: Courier;
}
i {
position: absolute;
right: -14px;
}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<ul class="listBox">
<li><div><p>Course ID: COMP108<br/>Course Name: Computer_Science_Industrial<br/>_Experience_Reflective_Learning_I<br/>Credits: 3<br/>Pre-Requisite: NONE<br/>Co-Requisite: NONE</p>
<i class="fas fa-arrow-right fa-2x"></i></div></li>
<li><div><p>Course ID: COMP201<br/>Course Name: Computer_Science_Industrial<br/>_Experience_Reflective_Learning_II<br/>Credits: 3<br/>Pre-Requisite: MATH201<br/>Co-Requisite: NONE</p><i class="fas fa-arrow-right fa-2x"></i></div></li>
<li><div><p>Course ID: COMP248<br/>Course Name: Object-Oriented_<br/>Programming_I<br/>Credits: 3<br/>Pre-Requisite: MATH204<br/>Co-Requisite: COMP201</p></div></li>
</ul>
要使用position: absolute定位和居中箭头，right将等于0减去箭头图像宽度的一半。
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？