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

How to align divs in a row inside a list item and fill all horizontal space – Html

CSS newbie here. I want to have the text div fill all the horizontal space and have the button "stick" to the right. item number, text and button should all be on the same row, even if if the text doesn’t fit on one row. If this layout is redundant or insufficient, please correct me.

I want it to look like this:

page mockup

<ol>
  <li>
    <div class="wrapper">
      <div class="text">
        some item text
      </div>

      <div class="button">
        <a>GO</a>
      </div>
    </div>
  </li>
</ol>
Tags:

2

Answers


  1. 0

    Add display: flex; to the parent (i.e., .wrapper) and flex-grow: 1; to the child (i.e., .text).

    See the snippet below.

    .wrapper {
  display: flex;
}

.text {
  flex-grow: 1;
}
    <ol>
  <li>
    <div class="wrapper">
      <div class="text">
        some item text
      </div>
      <div class="button">
        <a>GO</a>
      </div>
    </div>
  </li>
</ol>
    Login or Signup to reply.
  2. 0

    You can use flex with gap too like:

    .wrapper{
  display:flex;
  gap: 10px;
}
    <ol>
  <li>
     <div class="wrapper">
       <div class="text">
         some item text
       </div>
       <div class="button">
         <a>GO</a>
       </div>
     </div>
  </li>
</ol>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search