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?