What is the best way to align the icon and input box to the right within my header?

I've been struggling with CSS as a beginner and I can't seem to get my icon and input box aligned to the right inside my header. Here's what it currently looks like: https://i.sstatic.net/dmJVD.png

Here is the HTML for my header:

<div class="toolbar" role="banner">
  <a  routerLink="/cookbook" routerLinkActive="active">Cookbook</a>
  <a  routerLink="/cookbook/create-recipe/-1" routerLinkActive="active">Add Recipe</a>
  <a  routerLink="/cookbook/find-recipe" routerLinkActive="active">Find Recipe</a>
  <mat-icon class="icon" >search</mat-icon>
  <input class="search" matInput placeholder="Search">
</div>

Could someone please guide me on how to align them to the right without overlapping?

htmlcssangular

Answer №1

If you want to achieve a specific layout, consider using flexbox.

To separate different groups, assign different classes and utilize the flex box nth-child property for styling.

.toolbar{
  display:flex;
  background:black;
  color:white;
  padding:12px;
}
.first:first-child{
    margin-right :auto;
}
<div class="toolbar" role="banner">
  <div class="first" >  
  <a  routerLink="/cookbook" routerLinkActive="active">Cookbook</a>
  <a  routerLink="/cookbook/create-recipe/-1" routerLinkActive="active">Add Recipe</a>
  <a  routerLink="/cookbook/find-recipe" routerLinkActive="active">Find Recipe</a>
   </div>
  <div class="second">
  <mat-icon class="icon" >search</mat-icon>
  <input class="search" matInput placeholder="Search">
   </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to align an HTML DIV with a logo on the left side?

I am trying to position a div called #top_menu in the center of the page. <div id="top_menu">This is the menu and it is centered on the page</div> Here is my CSS code: #top_menu { margin: 0 auto; width: 600px; ... } Next to the top menu, I ...

htmlcsslayoutcentergraphical-logo

Utilizing Angular's classBinding on each individual element through a click event listener

For my school project, I am developing a Quiz App. In the Learning section, I want to implement a feature that changes the color of each answer option when clicked. If the answer is correct, it should turn green; if not, it should turn red. This feature sh ...

angulartypescriptclassbinding

Modifying the background image of the <body> element in CSS to reflect the season based on the current month in the calendar

I'm struggling to change my HTML background based on the date. The code I've tried isn't working as expected and I can't seem to find any relevant examples to guide me. My goal is simple - I want the background of my HTML page to be ch ...

javascripthtmlcsscomparison-operators

Bootstrap does not have the ability to alter the selected value of a select element

When a user selects a filter from the dropdown menu and clicks the search button, the selected value reverts to the first option instead of staying as the last chosen option. In my controller, I send the selected filter to the view using ViewBag. This is ...

javascripthtmljquery.net-corebootstrap-4

Creating a dynamic image gallery with varying image dimensions using JavaScript and Bootstrap

Struggling with aligning an image gallery featuring images of varying sizes? I don't want to set the size programmatically as it may not look good on different screens. The additional challenge is dealing with white spaces between images and not knowi ...

javascripthtmlcsstwitter-bootstrapimage-gallery

The fixed header column doesn't remain sticky

I am working on fixing the first column in my table to remain static on mobile devices so that users can easily identify the data they are viewing when scrolling. While the td elements in the table work perfectly as intended, the column header continues to ...

htmlcsscss-tablesbootstrap-5

Using AngularJS, you can display repeated elements in a single textarea by utilizing

--> I want to be able to input data into a textarea using just one textarea element. --> The reason for this is so that when the data in MySQL is updated, I can type new data in the textarea while still keeping the existing data. I have tried using ...

javascripthtmlmysqlangularjs

To style a text box next to text within a paragraph in CSS, simply create an empty box

I have some CSS classes defined as follows: .p_box { position: relative; } .p_box span { background-color: white; padding-right: 10px; } .p_box:after { content:""; position: absolute; bottom: 0; left: 0; right: 0; top: ...

htmlcss

Implementing nth-child selector in vanilla JavaScript

Is there a way to dynamically change the number within the nth-child brackets when clicking on a button? For instance, can I click a button and have the next slide in a slideshow appear? .slideshow:nth-child(n){} I specifically need to modify n using only ...

javascripthtmlcss

The design of the Angular2 bootstrap navbar is very underwhelming

Struggling to implement Bootstrap's navbar in my Angular 2 application, but the navigation items appear distorted: https://i.sstatic.net/x4vlS.png Interestingly, when hovering over any of the items, they display perfectly (as shown with the mouse ov ...

angularjsangulartwitter-bootstrap-3

default radio option with pre-selected value

Below is a radio option list, but I'm having trouble getting the desired default selection on first render: <label class="radio normalFontWeight"> <input type="radio" name="Criteria" data-ng-value="EVERYONE_REVIEWED" data-ng- ...

javascripthtmlangularjsradio-button

How can I make an element slide onto the page without any animation using jQuery when the page

I have a div element on my webpage that I can collapse using a button with jQuery. I want this div to be collapsed by default when the page loads. To achieve this, I used window.onload event: window.onload=function(){$("#upgradeInfoCollapse").slideToggle( ...

javascriptjqueryhtml

Switch up between two distinct colors every three elements using a single selector

I have a group of tr items in my list and I want to apply CSS styles to them in a specific pattern : red red red black black black red red red black and so on. Is there a way to achieve this using just one selector? Currently, I'm doing it like th ...

csscss-selectors

Even after reaching the bottom of the page, the div for overlay projects continues to scroll

*{ margin: 0; padding: 0; } body{ font-family: helvetica , sans-serif; background-color: #1E1E20; } .parallax-container { /* The image used */ background-image: url("https://i.sstatic.net/BlF.jpg"); animation-name: pixels; animation-durat ...

htmlcss

A guide on choosing a custom button color and automatically reverting to its original color when another button is clicked

I have a collection of 24 buttons, all in a dark grey (#333333) shade. Whenever I click on one of the buttons, it changes to a vibrant blue color (#0099ff), which is functioning correctly. However, when I proceed to click on another button, the previous ...

javascriptphphtmlcss

Extracting specific data from a JSON subnode within an HTML document

I have been attempting to retrieve product data (name, price, url), along with information on available sizes and colors, from a website that is formatted in JSON (https://www.bergzeit.de/marken/salewa/). However, I am struggling to locate the 'elemen ...

pythonhtmljsonscrapy

Vertical stacking of Bootstrap cards is a common design practice

Good day everyone! I'm in the midst of a personal project that involves utilizing the bootstrap framework and PHP. My goal is to fetch data from my MySQL database and have it displayed in horizontal rows of 4 individual cards within a bootstrap card e ...

phpcssbootstrap-4

Error in HTML code when trying to incorporate a JavaScript file

I'm struggling with something seemingly simple - including a JavaScript file in my flat HTML page. Here is the content of my JavaScript file: <script> $(document).ready(function() { $('div').css('background', 'red& ...

javascriptjqueryhtml

Is there a way to eliminate the white background from a webview display?

Currently, I am facing an issue where I am loading a HTML file into a webview. Both the background color of my HTML file and my activity is black. However, there is a brief white flash at the beginning upon finishing loading due to the white background col ...

androidhtmlxmlwebview

Expanding Gridview Width within a Container in ASP.Net: A Step-by-Step Guide

https://i.stack.imgur.com/ZaJE7.jpg After viewing the image above, I am facing a challenge with stretching and fixing a gridview to contain the entire div where it is placed. The issue arises when the gridview adjusts automatically based on the content&ap ...

javascriptc#jquerycssasp.net