Unable to show inline form within a ul element

I had a ul list with regular text inside the li tag. When I attempted to show it inline, it worked perfectly.

However, as soon as I replaced that text with a form, I could no longer get it to display inline.

This was my HTML code:

<ul class='test'>
   <li><form method='post' action=''>
       <input type='hidden'><br><br>
       <button class='hi' type='submit'>Test1</button>
       </form>
  </li>
  <li><form method='post' action=''>
     <input type='hidden'><br><br>
     <button class='hi' type='submit'>Test2</button>
     </form>
  </li>

These were the CSS rules applied:

.hi{
  display:block;
  background-color:white;
  color:blue;
  border: none;
  outline:none;
}
.hi:hover{
   text-decoration:underline;
}
.test{
  list-style-type:none
}
.test li{
  display:inline;
}

You can view the JSfiddle here.

Can you suggest a solution for getting test 1 and test 2 in that JSfiddle to be displayed inline?

Answer №1

Typically, the CSS for <form> elements in browsers is set to display: block;

To change this default behavior, you need to specify in your CSS file,

form {
    display:inline;
}

Check out the updated code on Fiddle

A better approach is to assign a class to the <form> element:

<form method="post" action="" class="myform">

Then, add the following CSS:

.myform {
    display:inline;
}

This will override the browser's default CSS for forms and will only affect forms with the specified class.

Answer №2

There are a few issues here: The br tag is creating a newline, the default display for form is block, and your button is also set to display as block.


form, button.hi {
    display:inline;
}

br {
    display:none;
}

Answer №3

Simply include this tag

.test li {
  float:left;
  display:inline
}

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

Navigate across list items using the tab key in Angular 7

Below is the sidenav menu snippet containing various items: <ul class="account-settings-container" *ngIf="isUserActive"> <li> <app-account-information></app-account-information> </li> <li> <app-theme-p ...

Provide alternative styling through css in instances where the Google Books API does not provide an image

How can I modify the CSS code to display the author and title of a book when there is no image available from the Google Books API? Currently, users see a custom image linked here, but it's not clear what it represents without the name and author inf ...

Bring life to the process of adding and removing DOM elements through animation

I am seeking to provide an engaging and interactive experience for my users while ensuring responsiveness. To achieve this goal, I have decided to learn more about web development by creating a card game. My current setup involves clickable elements that ...

Switch up the color of checkboxes with a dropdown menu option

I have an HTML dropdown code and I am trying to trigger a click event when a specific value is selected. Once this value is clicked, I want some checkboxes to change color. <select> <option value="calculate">calculate</option> ...

View does not display initial value selected in ReactJS

I'm having trouble setting an initial value for a select element that isn't displaying in the view. Here's my JSX: var SelectOKNO = React.createClass({ render() { return ( <div> <select className="selectpicker" ...

Different types of video formats used for html5 video players

Looking for some guidance here. I'm currently in the process of developing a website that allows users to upload their own videos. For the video player, I've opted for the HTML5 player by . My main concern is ensuring that the HTML5 player can on ...

Activating Bootstrap modal when a navigation link is clicked

Just started a site for a client and new to Bootstrap. I've got the layout down - full-width page with "Top Nav" within the nav bar, looking to create a modal effect drop-down. When clicking on "About", it should trigger the .modal function. However, ...

Tips for making a background image responsive using ng-style in AngularJS

Can anyone assist me in fixing the gap space issue in a responsive view with an attached jpg background image? Follow this link for more details: enter image description here ...

What is the best method for eliminating buttons and text in a row using CSS?

I faced an issue when trying to create a row, so I improvised with the following setup. However, I actually need a proper row layout for both the Google button and telephone number button. Here are my CSS snippets: .google-button { color: white; borde ...

Using jQuery to toggle the image of a button based on its id

I have a jQuery function that opens another section when clicking on a div with the class 'open', and changes the image of a button by switching its id for CSS. However, I now need to change the button's image back when it is clicked again. ...

Designing a Dynamic Floating Element that Shifts with Scroll Movement

Hey there everyone!, I am currently working on a project in Wordpress and I was wondering if anyone has experience creating a floating widget that moves along with the page as you scroll. Any suggestions on how to achieve this? Would it involve using Javas ...

Struggling to customize checkbox design using HTML and CSS

Why am I unable to style HTML checkboxes with CSS? No matter what I try, the appearance of the checkboxes remains unchanged: Here is the HTML code: <input type="checkbox" id="checkbox-1-1" class="regular-checkbox" /> <nput type="checkbox" id ...

Displaying random divs and subsequently animating them downwards using JavaScript

I am in the process of creating a random appearing div that then falls down. Here is the code I have so far: $(document).ready(function(){ $('#test').animate({top: 80 + '%'},900); }); <div id="test" style="background:#98bf21;heigh ...

When you click on the input field, a file manager window will open. You can then select a file and the URL of the selected file will be automatically added to the

I need assistance with customizing the code to open the flmngr window and add the URL of the selected file to the input field when onclick. window.onFlmngrAndImgPenLoaded = function() { var elBtn = document.getElementById("btn"); // Style bu ...

The functionality of the "enter" key is disabled in the textarea of Internet Explorer 8

Pressing enter in a textarea with the nowrap whitespace attribute set through CSS does not create a new line in IE8. Instead, just a simple whitespace appears. Other browsers like Opera, Chrome, and Firefox do not have this issue. Any solutions for this pr ...

How can I line up the bootstrap datepicker with a bootstrap column?

I currently have Bootstrap 3.3.7 and a bootstrap datepicker version 1.6.4 integrated into my project. However, I am facing an issue where the datepicker does not fill up the designated column within a div with the class col-md-6. Here is the HTML code sni ...

What are the steps to executing commands with child processes in Node.js?

I have successfully established communication between the client and server using socket.io. I am now utilizing WebSockets to send commands from the client to the server, and I would like to execute these received commands on the server. Here is my approa ...

Creating One Comprehensive Object by Merging Multiple Character Objects

I am attempting to extract text from a news article using the code snippet below: library(rvest) url <- "https://www.bbc.com/future/article/20220823-how-auckland-worlds-most-spongy-city-tackles-floods" final = url %>% read_html() %>% ...

Customizing TableRow Hover Effects in React with Material-UI

I've been spinning in circles with this issue. It seems like I just can't grasp how class overrides function in Material-ui. I attempted to follow the advice in this response: CSS on Material UI components However, it didn't produce any res ...

Discovering the reason behind a DOM element's visual alteration upon hovering: Where to start?

Visit this page, then click on the next button to navigate to the time slots section. As you hover over any time slot, you will notice a change in appearance. Despite inspecting Chrome's developer tools, I was unable to locate a style with a hover dec ...