Question 170411 in Html Question posted in
Some basic documentation can be found here.

How can I put two HTML buttons side-by-side & on same level? Need help finding errors?

here is the html code of the buttons:

{% extends 'main/layout.html' %}

{% block content %}
    <div class="features">
        <h1>Главная страница</h1>
        <div style="display: inline-block;" id="outer">
            <form action="{% url 'about' %}">
                <button class="btn btn-warning">На страницу про нас</button>
            </form>
            <form action="{% url 'data' %}">
                <button class="btn btn-warning">На страницу данных</button>
            </form>
        </div>
    </div>
{% endblock %}

{% block title %}Главная страница{% endblock %}

can you please explain in detail how to fix the problem!

Tags:

2

Answers


  1. 0

    You can do it by adding this in your css:

      display: flex;
  justify-content: space-between;
}
    Login or Signup to reply.
  2. 0

    To address styling issues, start with the HTML and any styling you have:

    <div class="features">
    <h1>Главная страница</h1>
    <div style="display: inline-block;" id="outer">
        <form action="about">
            <button class="btn btn-warning">На страницу про нас</button>
        </form>
        <form action="data">
            <button class="btn btn-warning">На страницу данных</button>
        </form>
    </div>
</div>

    Use your browser’s debugging tools to observe the styling rules being applied to your elements. In this case, the <div> with id="outer" is inline-block, so it doesn’t take up the full width. Remove that and see that happens (still in your browser’s debugging tools):

    <div class="features">
    <h1>Главная страница</h1>
    <div id="outer">
        <form action="about">
            <button class="btn btn-warning">На страницу про нас</button>
        </form>
        <form action="data">
            <button class="btn btn-warning">На страницу данных</button>
        </form>
    </div>
</div>

    Now that <div> takes up the full width, but so do the <form> elements. You can make those be inline-block:

    <div class="features">
    <h1>Главная страница</h1>
    <div id="outer">
        <form style="display: inline-block;" action="about">
            <button class="btn btn-warning">На страницу про нас</button>
        </form>
        <form style="display: inline-block;" action="data">
            <button class="btn btn-warning">На страницу данных</button>
        </form>
    </div>
</div>

    Which "works". But you may be able to do better. You can do a lot of things with CSS flex. For example, that <div> can be a flex container:

    <div class="features">
    <h1>Главная страница</h1>
    <div style="display:flex;" id="outer">
        <form action="about">
            <button class="btn btn-warning">На страницу про нас</button>
        </form>
        <form action="data">
            <button class="btn btn-warning">На страницу данных</button>
        </form>
    </div>
</div>

    Then you can do what you like with that flex styling. Do you just want a gap between the <form> elements? Do you want them to take up the full width with maximum space between? Something else? There are lots of options available. For a simple gap, for example:

    <div class="features">
    <h1>Главная страница</h1>
    <div style="display:flex;gap:1rem;" id="outer">
        <form action="about">
            <button class="btn btn-warning">На страницу про нас</button>
        </form>
        <form action="data">
            <button class="btn btn-warning">На страницу данных</button>
        </form>
    </div>
</div>

    Or for full-width space:

    <div class="features">
    <h1>Главная страница</h1>
    <div style="display:flex;justify-content:space-between;" id="outer">
        <form action="about">
            <button class="btn btn-warning">На страницу про нас</button>
        </form>
        <form action="data">
            <button class="btn btn-warning">На страницу данных</button>
        </form>
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search