html - 我们如何在父 div 的右侧对齐子 div
问题描述
在下面的代码中,我有一个锚标签,在该锚标签内我有一个 div。所以在这里我正在尝试将锚标签和 div 并排对齐。在我的情况下,当我给 div 提供左右属性时,它隐藏在锚标记内,它没有出现左右,所以我们如何将它并排对齐,就像左侧是锚,右侧是 div。
{% if CategoriesBar%}
{% for Categories in CategoriesBar %}
<a class="trigger" href="{% url 'getProductsByCategory' Categories.cat_name {{Categories.cat_name}}
<div class="sub">
{% for subCategories in SubCategoriesBar %}
{% if Categories.cat_id == subCategories.parent_id %}
<div class="item">{{subCategories.cat_name}}</div>
{% endif %}
{% endfor %}
</div>
</a>
{% endfor %}
{% endif %}
css
.trigger {
box-sizing: border-box;
position: relative;
width: 120px;
margin: 0 0 50px;
padding: 10px;
background: #bada55;
text-align: center;
}
.sub {
box-sizing: border-box;
position: absolute;
top: 100px;
left: 0;
width: 120px;
background: #4863a0;
color: #fff;
text-align: left;
解决方案
也许将 div 元素的显示从块(默认)更改为内联(与锚元素相同),以便它们可以在同一行。
推荐阅读
- minecraft - 如果半径内有某个块如何执行
- python - 在 keras 回调文件名中包含时代和型号
- c++ - teensy3.2 上的闪烁 led 与 arm 编程
- operating-system - APU(例如apple m1 mac)上的内存复制是否使用GPU特定的宽向量指令?
- reactjs - Reactjs 中的 AWS Cognito 身份验证
- asp.net - Blazor WASM RuntimeError 内存超出范围
- docker - docker 文件的 docker build 问题:Jobber 在添加包后无法工作
- javascript - 我在设置我的 jest 配置时遇到问题 react native 无法导入组件
- android - OkHttpClient 成功从 API 检索数据,但是在 Kotlin Android 应用程序中调用了入队 onFailure
- javascript - 条件如果多个元素有一个类