Html 相应地对齐相邻的框

我想把框和箭头都对齐得很好&笔直。我尝试过使用填充物之类的东西，但它似乎不起作用

HTML:

---

Flexbox可能会使这项工作更好

将容器元素设置为

display:flex

，并从

.listBox

中删除

width:25%

和

display:inlineblock

。您可能需要考虑添加<代码> Flex Guest: 1；<代码>和

弹性基础：0

到

.listBox

，使它们具有相同的宽度

CSS:

HTML:

课程编号：COMP108
课程名称：计算机科学工业
经验反思学习
学分：3
先修：无
共修：无

课程编号：COMP201
课程名称：计算机科学工业经验反思学习II
学分：3
先修课：MATH201
共修课：无

课程ID:COMP248
课程名称：面向对象编程\u I
学分：3
先决条件：MATH204
共同条件：COMP201

只是又快又脏，没有调整宽度之类的，因此出现了破损的文本。查看

正文{}

中的样式。此解决方案使用flexbox，请随意查看

正文{
显示器：flex；
柔性包装：包装；
对齐项目：居中；
}
.列表框{
背景色：rgba（245246250,0.7）；
边界半径：15px；
显示：内联块；
宽度：25%；
右边距：-4px；
z指数：-1；
填充：8px；
}
.列表框p{
字体大小：11px；
字体系列：信使；
}
img{
填充：0 40px；
}

课程编号：COMP108
课程名称：计算机科学工业
经验反思学习
学分：3
先修：无
共修：无

课程编号：COMP201
课程名称：计算机科学工业经验反思学习II
学分：3
先修课：MATH201
共修课：无

课程ID:COMP248
课程名称：面向对象编程\u I
学分：3
先决条件：MATH204
共同条件：COMP201

在这种情况下，您可以使用CSS

flex

。在本例中，我使用

更改了您的图像，但您也可以使用图像（为它们指定类

间隔符

）

/*新增*/
.名单{
宽度：100%；
显示器：flex；
证明内容：之间的空间；
背景色：#579C81；
}
.列表.垫片{
利润率：0.10px；
最大宽度：10%；
自对准：居中；
}
.列表框{
背景色：rgba（245246250,0.7）；
边界半径：15px；
宽度：25%；
填充：8px；
/*改变*/
显示器：flex；
/*新*/
弹性：1自动；
}
.列表框p{
字体大小：11px；
字体系列：信使；
/*新的*/
弹性：10自动；
单词break：打破一切；
最大宽度：100%；
}

课程ID:COMP108
课程名称：
计算机科学工业经验反思学习学分：3先决条件：无共同条件：无

>> 
课程编号：COMP201
课程名称：计算机科学工业经验反思学习II
学分：3
先修课：MATH201
共修课：无

>> 
课程ID:COMP248
课程名称：对象-
面向对象的编程学分：3个先决条件：数学204个共同条件：COMP201

您可以这样做：

*{
框大小：边框框；
保证金：0；
填充：0；
}
.列表框{
宽度：100%；
}
.列表框：之后{
内容：''；
显示：表格；
明确：两者皆有；
}
李先生{
位置：相对位置；
浮动：左；
宽度：33.3333%；
列表样式：无；
填充：8px 16px；
}
李分区{
背景色：#999；
边界半径：15px；
宽度：100%；
显示器：flex；
对齐项目：居中；
}
.列表框p{
填充：8px；
字体大小：11px；
字体系列：信使；
}
我{
位置：绝对位置；
右图：-14px；
}

课程编号：COMP108
课程名称：计算机科学工业
经验反思学习
学分：3
先修：无
共修：无


课程编号：COMP201
课程名称：计算机科学工业经验反思学习II
学分：3
先修课：MATH201
共修课：无

课程ID:COMP248
课程名称：面向对象编程\u I
学分：3
先决条件：MATH204
共同条件：COMP201

尝试使用float：对于所有5个部分、图像和div，均为左侧

<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>

.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;
}

.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;
}

<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>