I have a simple div that contains a few anchor tags and a button. I want the first three anchor tags to be aligned to the left, and the button to be aligned to the right. But I want them to be all on the same row. My example shows all four elements to the right. How can I achieve that? Thanks

Please see My example

I just want the first three buttons to the left of the page and the last one to the right. However, I want to keep them aligned and on same row.

CodePudding user response：

You can use flexbox for that, there are many ways, one of them is the following :

.extra-buttons {
  display: flex;
  margin-bottom: 5px;
}

button {
  margin-left: auto;
}

Another (cleaner) way would be to wrap your links in a div and apply justify-content: space-between on the .extra-buttons:

HTML:

<div >

   <!-- How do I align these three anchor tags to the left -->
   <div>
      <a >
          <span ></span> Refresh 
      </a>
      <a >
          <span ></span> Print 
      </a>
      <a >
          <span ></span> Add 
      </a>
   </div>

   <!-- But keep this at the right (end) -->
   <button>Reset</button>
  </div>

CSS:

.extra-buttons {
  display: flex;
  justify-content : space-between
  margin-bottom: 5px;
}