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

Looking to update properties for elements within the Angular Material 16 mat-menu across the board?

Currently working with Angular Material 16 and I have a question regarding the height of buttons inside the mat-menu element. Here is an example of the code: <button mat-icon-button> <mat-icon>more_vert</mat-icon> </button> ...

cssangularangular-material

Utilizing CSS flex-end to position images

I am facing an issue with aligning the last item in my container named section-a. The height of the container is set to 100vh and it contains 3 items. I have tried using the property align-self:flex-end, but there are no visible changes. Can anyone help me ...

htmlcssflexbox

Issue with loading background image in HTML/CSS is being caused by a Cross-Origin Read Blocking problem

As part of my project, I need to load an image from my image hosting site by using my github repository. The CSS code I am using for this task is as follows: #main-section{ background-image : url("https://github.com/<mypath>/myphoto.jpg"); } Be ...

htmlcss

Adding padding to the navbar when collapsed causes extra space between the brand name and the hamburger icon button in Bootstrap

I am in the process of creating a fixed-top navigation bar for my webpage. However, I have encountered an issue where there is excessive space between the "Brand" name and the collapsed menu icon when viewed on smaller screens. Here is a visual representa ...

htmlcsstwitter-bootstrapnavbar

Utilizing Bootstrap 3: Mastering the Implementation of .col Classes with .form-control Classes

In my form, I have utilized the .form-control classes for the form elements. To arrange two inputs side by side, I am applying .col-md-6 on each of these inputs. However, the width generated by .col-md-6 is being overridden by the .form-control class. Is ...

htmlcsstwitter-bootstrap-3

Customize the Grid Offset in CSS like BootstrapCSS Grid Offset

I am attempting to replicate the offset feature in Bootstrap's desktop grid system, where a class like .col-md-offset-3 creates an offset using margin-left. However, in my implementation found at this link, the CSS selector does not work as intended: ...

htmlcssgridmargin

Error: The function window.intlTelInput is not recognized within the ReactJS framework

I am currently learning ReactJS and encountering an issue when using jQuery with React JS for intlTelInput. I have installed npm jQuery and imported all the necessary code. Additionally, I have included all the required CSS and jQuery links in my index.htm ...

javascripthtmljquerycssreactjs

Radio boxes vanish in Safari when -webkit-perspective is applied

Check out this quick demonstration on Safari only: http://jsfiddle.net/2late2die/8AJnD/ If you remove the perspective style, all checkboxes will appear normal. When using -webkit-transform-style:preserve-3d, the checkboxes disappear. This issue seems to af ...

csswebkitsafaricss-transforms

Shifting and positioning the card to the center in a React application

I am currently constructing a React page to display prices. To achieve this, I have created a Card element where all the data will be placed and reused. Here is how it appears at the moment: https://i.stack.imgur.com/iOroS.png Please disregard the red b ...

javascripthtmlcssreactjs

Utilizing the Bootstrap grid system allows for input fields to automatically expand to 100% width once they reach

I am encountering some challenges while attempting to develop a responsive form using bootstrap grids. The issue seems to arise when resizing the browser window, as the grid classes behave unexpectedly by expanding and taking up the entire page width at ce ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

CSS animation properties

Is it possible to animate only the div container and not the "p" inside? div { width: 100px; height: 100px; background-color: red; -webkit-animation-name: example; /* Safari 4.0 - 8.0 */ -webkit-animation-duration: 4s; /* Safari 4.0 ...

htmlcss

Experiencing challenges during the creation of a NUXT build

Trying to build a Nuxt SSR app, but encountering an error related to the css-loader during the build command execution. The issue seems to be with Invalid options object. ERROR in ./node_modules/vue2-google-maps/dist/components/streetViewPanorama.vue (./no ...

cssvue.jswebpacknuxt.js

Using an External Style Sheet on AMP Pages is not allowed

I'm currently in the process of converting my HTML page into AMP Pages. I recently came across a test url on to validate my AMP pages. Here's a screenshot for reference: However, I encountered an issue when trying to use external CSS. <lin ...

htmlcssamp-html

Positioning bar chart columns and text using CSS

My component generates HTML for a simple bar chart, with the height and background color computed within the component. Everything functions correctly, but I am facing an issue where long text causes displacement of the bar above it. Another problem is th ...

htmlcssgraphicstailwind-cssvisualization

In my PHP script, I'm seeking a solution to include a numeric value and then

Greetings, I'm experiencing a peculiar issue where only the first section appears when I submit a number. Here is the code I've implemented and I would greatly appreciate any assistance or guidance. Essentially, my intention is to have a user red ...

phphtmlcssweb

Safari is experiencing issues with overflow-x functionality after a device rotation

I'm currently in the process of developing a website that requires a specific div element to be horizontally scrollable if its content exceeds the screen size. This functionality works smoothly on most browsers, except for Safari: Scenario: When the ...

htmlcssipadsafaritouch

Setting the size of a box using CSS in HTML pages

I am facing issues with resizing boxes. Below is the code snippet: <!DOCTYPE html> <html lang="en"> <head> <style> .wrapper { text-align: center; } #bubble { display: inline; -moz ...

htmlcss

Ways to prevent scrolling in Angular 6 when no content is available

I am developing an angular 6 application where I have scrollable divs containing: HTML: <button class="lefty paddle" id="left-button"> PREVIOUS </button> <div class="container"> <div class="inner" style="background:red">< ...

javascripthtmlcssangulartypescript

What is the best way to create a toggle button that can show more or show less of a text snippet with animation?

Is it possible for someone to assist me with showing a long text partially and providing a "show more" button to reveal the rest, along with a "show less" option, all with some CSS animation? I was thinking of using a font awesome arrow down icon for expan ...

javascripthtmlcss

Bootstrap 4 Nav Table of Contents with Expand and Collapse Feature

Currently, I am encountering an issue with implementing a button to expand and collapse a "table of contents" in Bootstrap 4. The code I have so far can be viewed here: https://codepen.io/nht910/pen/RwwwyKB Code Snippet: <div class="main-wrapper col- ...

javascripthtmlcsstwitter-bootstrap