首页 > 解决方案 > 我们如何在父 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;

标签: htmlcssdjango

解决方案


也许将 div 元素的显示从块(默认)更改为内联(与锚元素相同),以便它们可以在同一行。


推荐阅读