What could be causing my buttons to not line up properly?

My buttons are refusing to line up horizontally for some unknown reason. I can't figure out what the issue is. They are all set to display as inline-block elements. The first image shows a website with the correctly aligned buttons, while the second one displays a website without the buttons so you can see the problem. Thank you :).

This is my HTML:

<center>
<div id="menu"> 
    <form>
        <input class="MyButton" type="button" value="About us" onclick="F:\practice website's\About us.html">
    </form>
    <form>
        <input class="MyButton" type="button" value="Events" onclick="F:\practice website's\About us.html">
    </form>
    <form>
        <input class="MyButton" type="button" value="Sign up" onclick="F:\practice website's\About us.html">
    </form>
    <form>
        <input class="MyButton" type="button" value="Volunteer" onclick="F:\practice website's\About us.html">
    </form>
    <form>
        <input class="MyButton" type="button" value="Contact" onclick="F:\practice website's\About us.html">
    </form>
</div>

This is my CSS:

a:link{
        text-decoration: none;
        color: rgba(250,250,250,0.5);
    }
    a:visited{
        text-decoration: none;
        color: rgba(250,250,250,0.5);
    }
    input.MyButton {
        display: inline-block;
        width: 80px;
        height: 20px;
        font-weight: bold;
        background: rgba(0,0,0,0.5);
        color: rgba(250,250,250,0.5);
        cursor: pointer;
        border-radius: 10px;
        border: none;
    }
    #menu{
        display: inline-block;
    }

This is how it looks currently

This is how it should look

Answer №1

It is advisable to avoid using input elements and JavaScript when anchor tags can achieve the same result.

a:link {
  text-decoration: none;
  color: rgba(250, 250, 250, 0.5);
}
a:visited {
  text-decoration: none;
  color: rgba(250, 250, 250, 0.5);
}
#menu a {
  display: inline-block;
  width: 80px;
  height: 20px;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.5);
  color: rgba(250, 250, 250, 0.5);
  border-radius: 10px;
  border: none;
  text-align:center;
  padding: 5px;
}
#menu {
  width: 100%;
  text-align: center;
}
<div id="menu">
  <a href="about_us.html">About us</a>
  <a href="sign_up.html">Sign up</a>
  <a href="events.html">Events</a>
  <a href="volunteer.html">Volunteer</a>
  <a href="contact.html">Contact</a>
</div>

In addition, as mentioned by Paulie_D, it is worth noting that the <center> tag has been deprecated. Centering elements can be achieved via CSS, as demonstrated in my example (div#menu).

Answer №2

First and foremost, it's important to understand that Links are not buttons & vice versa

In this scenario, multiple form tags are being used for individual input elements.

To improve the structure, consider enclosing all inputs within a single form.

a:link {
  text-decoration: none;
  color: rgba(250, 250, 250, 0.5);
}
a:visited {
  text-decoration: none;
  color: rgba(250, 250, 250, 0.5);
}
input.MyButton {
  display: inline-block;
  width: 80px;
  height: 20px;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.5);
  color: rgba(250, 250, 250, 0.5);
  cursor: pointer;
  border-radius: 10px;
  border: none;
}
#menu {
  display: inline-block;
}
<div id="menu">
  <form>
    <input class="MyButton" type="button" value="About us" onclick="F:\practice website's\About us.html">
    <input class="MyButton" type="button" value="Events" onclick="F:\practice website's\About us.html">
    <input class="MyButton" type="button" value="Sign up" onclick="F:\practice website's\About us.html">
    <input class="MyButton" type="button" value="Volunteer" onclick="F:\practice website's\About us.html">
    <input class="MyButton" type="button" value="Contact" onclick="F:\practice website's\About us.html">
  </form>
</div>

Additionally, note that the use of <center> tag has been deprecated and is no longer recommended. It's best to avoid using it in your markup.

Answer №3

One reason for using just one form tag is that it is a block level element typically containing other block level elements, making multiple unnecessary in this scenario.

<form>
    <input class="MyButton" type="button" value="About us" onclick="F:\practice website's\About us.html">
    <input class="MyButton" type="button" value="Events" onclick="F:\practice website's\About us.html">
    <input class="MyButton" type="button" value="Sign up" onclick="F:\practice website's\About us.html">
    <input class="MyButton" type="button" value="Volunteer" onclick="F:\practice website's\About us.html">
    <input class="MyButton" type="button" value="Contact" onclick="F:\practice website's\About us.html">
</form>

It is advisable to avoid using onclick and inline JavaScript, opting instead for a more organized approach like the following example enclosed within <script></script> tags.

document.getElementById("myBtn").addEventListener("click", displayDate);

In your case, using no JavaScript at all would be better than the current practice. Consider this alternative method:

<a href="path/other/file" class="myButton">Home</a>

When developing websites, use JavaScript only when necessary as there are users who disable JS by default, requiring consideration for accessibility purposes.

Answer №4

Your current buttons appear to be functioning as links rather than forms intended for submitting data. It may be beneficial to alter each form into a link.

<a href="AboutUs.html">
    <input class="MyButton" type="button" value="About us" />
</a>

You might also want to contemplate eliminating the button altogether and simply styling the a element, or inserting a span or div in this area.

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

How to style a CSS list and center-align it

My website features a <ul> list with submenus structured like this: <div id="cssmenu"> <ul> <li class='active'><a href='index.html'><span>Home</span></a></li> <li class=&ap ...

Update the database with the new values and display them in an HTML table

I am working with a table that looks like the one below: <script> $("#edit").hide(); // Initially hide the edit table $("#update").click(function() { $("#edit").toggle(); $("#shown").toggle(); ...

What is the best way to align an element on the right side of the screen?

I am having some trouble positioning a CSS element to the right side of the header. I attempted using the following code: position: Absolute; top: 20px; right 0px; This method works, however, when adjusting the browser window, the text also moves. I ha ...

Improper Alignment of Bootstrap 4 Navbar Link: Troubleshooting Required

Take a look at the image for the issue: https://i.stack.imgur.com/u9aCy.png As shown in the image, the NavBar links are stacked instead of being displayed in one row. This is the HTML code I have used: <!doctype html> <html> <head> ...

Duplication of elements in a Meteor and React environment

When it comes to creating a basic Meteor app with React, this is the structure I have put in place: <head> <title>test</title> </head> <body> <div id="render-target"></div> </body> Here is the start ...

When attempting to load a CSS file, Java automatically redirects to the login page

EDIT** After successfully loading CSS, I encountered an issue where the page kept redirecting back to login.jsp instead of displaying the CSS. Any insights on what might be causing this?https://i.sstatic.net/Ij7Oh.png I attempted to incorporate a custom ...

Ways to eliminate dates from the text of listed items

Before finalizing their registration, users on our site are shown a review page. This panel displays all the items they have selected, creating a unique and variable list for each individual. However, each item in the list starts with a distracting date/ti ...

Utilizing the jQuery .wrap() method to encase the surrounding HTML

I am currently using the following jQuery code: jQuery( ".quantity" ).wrap( "<div class=\"engrave_button\"></div>" ) to wrap the quantity div with the engrave_button div. However, I need to include the ...

How can we target every nth child element universally?

I am working with an HTML structure that has a specific layout, and I need to target all odd <span> elements globally without considering their parent elements. Is there a way to style 1, 3, 5, 7, 9 in red color? I attempted to use :nth-child(odd) b ...

The div content is aligning at the baseline rather than the middle

The social icons on my website are currently displaying at 40x40, with the text appearing below them. I am looking to center the text within the icons themselves. Any tips on how I can achieve this? Your help is much appreciated! Check out the fiddle here ...

Determine the total number of instances an HTML div element is utilized within a PHP script

Having conducted interviews with over 40 individuals, I'm looking to showcase this with a PHP script. Each interview comes with its own set of CSS classes, and adding an extra class or utilizing an existing one can help me determine the total number ...

Get ready for some Angular validation appearing on the screen

Using AngularJS, I have set up routes and validations on the HTML page. Here is a snippet of my HTML code: <form ng-controller="validateCtrl" name="loginForm" novalidate> <p>UserName:<br> <input type="text" name=" ...

What is the best way to hide the button when a user is viewing their own profile in an Angular application?

Each user has their own profile on the platform. A unique feature allows users to send messages by clicking a button when viewing other profiles. However, an issue arises where this messaging button also appears on a user's own profile. Is there a way ...

Run a JavaScript code to show a hidden element

My latest project involves automating tasks on a website using Selenium. I encountered an issue where I cannot click on a hidden button defined this way: <body> <div class="smenu" id="smenu4"> <input tabIndex="-1" type="button" ...

The precedence of theme CSS is paramount

Check out this link for Smirnoff Espresso Vodka 70cl (password: hide) Upon inspecting the page source, you'll see that my main stylesheet (main-style) is loaded at the top of the head section with high priority, even above my theme's style. Why ...

Which Wordpress theme would be best suited for this particular website?

I am looking to create a website on WordPress that resembles the design of this specific webpage: http://www.landrover.co.uk/index.html I need it for commercial purposes. Are there any templates available, either free or paid, with similar features? I do ...

What are the reasons for the various methods available for importing my JS code?

Here is the structure of my folders: --public ----frontend.js --views ----fontend.ejs The frontend.js file is located inside the public folder, while the frontend.ejs file is in the views folder. In my HTML / EJS file, I included the JavaScript (fronten ...

Toggling dropdown menus with conditional Jquery statements

I am experiencing some discomfort. :) I've been working on a calorie calculator that includes a dropdown for various dietary preferences. Currently, when a user clicks the button, the dropdown appears and disappears when clicking outside the button. ...

What is the best way to create dynamic transparency based on cursor position?

Is there a way to create an animation like the one on https://meetwalter.com, where the transparency changes with the cursor's position? I previously attempted a similar implementation using CSS, but it seems that the website accomplishes this effect ...

Adjusting the inner div dimensions to be 100% of the body's size without relying on the parent div using JavaScript

I have a main layer with multiple layers stacked on top of it. I need the second layer to extend its width to match the body's width. Main Project: http://example.com What I've tried: I looked into: Solution for matching div width with body ...