CODEWITHSUNDEEP
htmlcss
Sdev
Sdev

Reputation: 81

Align items horizontally in a list of buttons

I'm a beginner in Front-End programming, and I'm trying to figure out how to align horizontally items, I tried out several methods but never got to the right result. If I use the wrong way to do this, let me know, I am trying to learn more and to do things right.

.forum-list ul li i {
   margin-top:0.7em;
   width:100%;
   margin-right:2em ;
   color:gray;
}

.forum-list i:hover {
    color:yellow;
}

.forum-list-header {
    display:flex;
    align-items:center;
}

.forum-list ul {
    display:inline-block;
}

.forum-list ul li {
    text-decoration: none;
    list-style-type:none;
    text-align:center;
}

.btn-flex-between {
    display: flex !important;
    justify-content: space-between;
}

.forum-list button {
    background-color: #212e38;
    border: 2px solid #212e38;
    border-radius: 20px;
    padding: 10px 40px;
    width:100em;
    height: 8.5em;
    font-family: Poppins-SemiBold, FontAwesome;
    color:white;
    margin-right: 1em;
    margin-bottom: 1.5em;
    display:flex;
    justify-content: flex-start;
}
 <div class="forum-list-container">
        <div class="forum-list">
            <ul>
                <li>
                    <button class="forum-list-btn btn-flex-between">
                        <div class="forum-list-header">
                            <div class="forum-list-i"><i class="fa-solid fa-star fa-lg"></i></div>
                            <h2>Lorem ipsum dolor sit amet</h2>
                        </div>
                        <div class="forum-list-info-content">
                            <div class="forum-list-info-avatar"><img src=""></div><h3>5.1k</h3><h2>50.3k</h2><h1>Posts</h1><p>Messages</p>
                        </div>
                    </button>
                </li>         
            </ul>
      </div>
</div>
  <script src="https://kit.fontawesome.com/85b199d966.js" crossorigin="anonymous"></script>

Example of how it should be: enter image description here

How it is now: enter image description here

Here is my HTML:

   <div class="forum-list-container">
        <div class="forum-list">
            <ul>
                <li>
                    <button class="forum-list-btn btn-flex-between">
                        <div class="forum-list-header">
                            <div class="forum-list-i"><i class="fa-solid fa-star fa-lg"></i></div>
                            <h2>Lorem ipsum dolor sit amet</h2>
                        </div>
                        <div class="forum-list-info-content">
                            <div class="forum-list-info-avatar"><img src=""></div><h3>5.1k</h3><h2>50.3k</h2><h1>Posts</h1><p>Messages</p>
                        </div>
                    </button>
                </li>
            </ul>
        </div>
    </div>

My CSS:

.forum-list ul li i {
   margin-top:0.7em;
   width:100%;
   margin-right:2em ;
   color:gray;
}

.forum-list-header {
    display:flex;
    align-items:center;
}

.forum-list ul {
    display:inline-block;
}

.forum-list ul li {
    text-decoration: none;
    list-style-type:none;
    text-align:center;
}

.btn-flex-between {
    display: flex !important;
    justify-content: space-between;
}

.forum-list button {
    background-color: #212e38;
    border: 2px solid #212e38;
    border-radius: 20px;
    padding: 10px 40px;
    width:100em;
    height: 8.5em;
    font-family: Poppins-SemiBold, FontAwesome;
    color:white;
    margin-right: 1em;
    margin-bottom: 1.5em;
    display:flex;
    justify-content: flex-start;
}

Upvotes: 0

Views: 713

Answers (1)

Mbay
Mbay

Reputation: 75

According to your example image, just add flex-direction:column to .forum-list button. Then add display:flex; flex-direction:row; to forum-list-info-content class.

Upvotes: 1

Related Questions