align the horizontal navigation bar

I am facing an issue with my horizontal navigation bar. I want to include a search bar within the navigation bar, but it is causing misalignment.

Here is the link to the code: https://jsfiddle.net/r6ntxg2f/

If you look at the menu, you will notice that it is not aligned properly with the green line. The right side of the menu is even more misaligned. My goal is to align the entire menu with the green line.

<li id="searchbar">
  <form id="search" method="post" style="">
    <input id="bb" type="text" style="" />
    <input id="cc" type="submit" value="Search" style="" />
  </form>
</li>

Here is how it looks without the search bar: https://jsfiddle.net/q476f585/ (working)

css

Answer №1

It appears that the problem stemmed from your sizing and padding settings. Check out the updated solution on jsfiddle. I simply made adjustments to the padding and display styles. Make sure to double-check the padding for the first two buttons to ensure the bottom border looks right.

Answer №2

To resolve the issue, make adjustments to the padding. Below is the effective code snippet:

ul#menu_left {
  position: relative;
  left: 100px;
  width: 75%;
  font: 75% verdana;
  list-style-type: none;
  padding: 10px 10px 5px 10px;
  border-bottom: 1px solid green;
}
ul#menu_right {
  padding-right: 10px;
  float: right;
  padding-top: 2px
}
ul#menu_left li {
  display: inline;
}
ul#menu_left li a {
  padding: 6px 4px;
  border-bottom: 1px solid green;
  text-decoration: none;
  color: white;
  background-color: green;
}
ul#menu_left a:hover {
  color: black;
  background: yellow;
  border-bottom: 1px solid yellow;
}
li#searchbar {
  background-color: green;
  padding: 6px 4px;
  border-bottom: 1px solid green;
}
li#searchbar form {
  display: inline;
}
li#searchbar input {
  width: 50px;
}
<ul id="menu_left">
  <li><a id="tab1" href="#">The We</a>
  </li>
  <li><a id="tab2" href="#">Book</a>
  </li>
  <li><a id="tab3" href="#">Tab</a>
  </li>
  <li id="searchbar">
    <form id="search" method="post">
      <input id="bb" type="text" />
      <input id="cc" type="submit" value="Search" />
    </form>
  </li>
   <ul id="menu_right">
    <li><a id="tab5" style="" href="#">Up</a>
    </li>
    <li><a id="tab6" href="#">Contact</a>
    </li>
  </ul>
</ul>

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

Guide on moving to the following page of a website with the help of CSS selectors

I'm currently in the process of retrieving property details from a specific website (Find Properties For Sale). Initially, I successfully scraped the information from the initial page. However, upon attempting to gather data from subsequent pages, my ...

pythonhtmlcssscrapy

The simplest method for integrating SASS within your WordPress website

While I usually work with CSS, I've decided to tackle SASS in order to improve my efficiency. I successfully converted a CSS file from .css to .scss and it still works as expected. However, when I added variables, they didn't function properly. ...

csswordpresssass

Looking for assistance in merging CSS and HTML codes?

I am working on combining two different codes and could use some assistance. Here is the HTML code: <div class="loader"> <span></span> <span></span> <span></span> </div> Followed by the CSS cod ...

csseclipsehtml

Tips on customizing the CSS responsiveness of your Bootstrap carousel

I have recently installed a Bootstrap theme on my Wordpress site and I am trying to make some CSS adjustments. One issue I am facing is with the carousel. Currently, when I resize the website or view it on a mobile device... The carousel maintains a lar ...

htmlcsswordpresstwitter-bootstrapbootstrap-4

Transmit data from list items in the HTML to a form

Based on my understanding, there are limited options available to style an <option> tag within a <select> dropdown and it appears quite plain. So I was thinking about creating a more visually appealing dropdown using <ul> <li> tags ...

htmlcssselecthtml-lists

Padding in Bootstrap rows is not uniform

My grid template has 3 columns, but the first row in one of the columns is slightly pushed. Which CSS property should I adjust to fix this issue? Using Bootstrap framework. <div class="col"> <div class="col-sm"> <input type="redacted" ...

htmlcsstwitter-bootstrap

I'm wondering if there is a method for me to get only the count of input fields that have the class "Calctime" and are not empty when this function is executed

Currently, I am developing an airport application that aims to track the time it takes to travel between different airports. In this context, moving from one airport to another is referred to as a Sector, and the duration of time taken for this journey is ...

javascripthtmlcss

I am in need of setting up two rows side by side using the display

I'm trying to have two rows side by side using display grid, but I'm facing some issues. When I use the following CSS... .grid-container { display: grid; grid-template-rows: auto auto; grid-template-columns: auto; grid-column-gap: 100px;} It cre ...

htmlcssbootstrap-5

ensuring the footer is correctly aligned

<div id="footer"> <div class="row"> <div class="span5"> <img src="../goyal/webdesign.jpg" class="verisign-image"></div> I am a <select style="width:10%;" class="dro ...

htmlcsstwitter-bootstrap-3

Centering content within a <th> tag

Hey there, I'm currently facing an issue with aligning a div inside another one. To illustrate the problem, I've set up a small fiddle which you can check out here: https://jsfiddle.net/jpq7xzoz/ The challenge arises when using the jQuery table ...

jqueryhtmlcss

Styling does not seem to apply to inner components in NEXTJS

I am attempting to create a ChatGPT replica using Next.js and Tailwind CSS. My focus is currently on the main chat screen, where each message is displayed using a separate Message component with its own styling. However, I am facing an issue where the styl ...

cssnext.jstailwind-css

Changing the theme of a toggle button in Jquery Mobile when the button is pressed

I have a group of buttons with a specific class <div class="prog-day"> <div class="prog-clear" data-role="controlgroup" data-type="horizontal> <a href="#" data-role="button" data-mini="true" data-theme="b">Clear</a> ...

javascriptjquerycssjquery-mobile

The CSS styles are not recognized by the Windows 2003 server

After deploying my webapp, which was created using asp.net, to a testing server (Windows 2003 SP2, IIS6), I encountered an issue. When I accessed the default page, none of the CSS styles were applied. Only plain text or formatting from the .aspx file was v ...

c#asp.netcss

The CSS provider for Gtk+3 is malfunctioning

I've been attempting to set an image as the background of a GtkBox using a CSS provider, and also customize the style of some label text, but no matter what I try, nothing seems to work. Below is the content of my custom.css file: GtkBox#Home_Princi ...

csscgtk3

What is the best way to set a div's size to a constant value?

I recently designed a webpage that includes a feature where clicking a button adjusts the font size within the div. Within the div, there is a ul containing the buttons. However, when the font size changes, the div expands and the nav buttons also shift a ...

csshtmlfixed

Issue: Trouble with Rotating Tooltips in Javascript

I am facing a challenge with the tooltips on my website. I want to ensure that all tooltips have a consistent look and transition effects, but I am struggling to achieve this. The rotation and other effects applied using javascript are not functioning prop ...

javascriptjquerycssrotationtooltip

JavaScript and Responsive Design Techniques

I'm struggling to create a responsive page that starts with a mobile-first approach, but I keep running into the same issue. When I have my dropdown menu in the mobile version, it looks good. However, when I try to switch it to the non-mobile version ...

javascripthtmlcss

Generate individual CSS files using postcss and rollup

When I import each css file in my JavaScript, I want it to generate a new css file for the build. For example: import "./app.css"; import "./admin.css"; This would result in creating dist/app.css and dist/admin.css. My configuration fi ...

cssbuildrollupjspostcss

What is the best way to trigger a jQuery animation when a section becomes visible using Fullpage.js?

Within my website, I've incorporated Fullpage.js and am interested in triggering jQuery animate functions as users scroll to specific sections. Although I tested methods like mouseenter, mouseover, and mouseleave from the prior section, they did not d ...

jqueryhtmlcssfullpage.js

Designing an image transformation page by segmenting the image into fragments

Does anyone have insight into the creation process of websites like this one? Are there any plugins or tools that can assist in building something similar? ...

javascriptjqueryhtmlcss