<ul> <li> problem with display:block

HTML-CSS
#1

I have the following code which displays what i need but cant get the display:block to work, the buttons require the two black vertical lines.
Orr is there a better way to achieve the solution any help will be greatly appreciated.

<style>
	.lblist { list-style:none; list-style-type:none; padding:0px;}
	.lbtno { background-color: #FF8600; color:#000; border-radius:20px; padding-left:15px; padding-right:15px; width:150px; height:20px; line-height:20px; text-align:center; margin-bottom:3px;}
	.lbtno:hover { background-color:#D472FF;}
		a.lbtni { color:#000; text-decoration:none; display:block; border-left:3px solid #000; border-right:3px solid #000; font-weight: bold;}
		</style>
  </head>
  <body style="background-color:#000; color:#fff;">
    <div class="container">
    <ul class="lblist">
    <li class="lbtno"><a class="lbtni" href="#" >Test 1</a></li>
    <li class="lbtno"><a class="lbtni" href="#" >Test 2</a></li>
    <li class="lbtno"><a class="lbtni" href="#" >Test 3</a></li>
    <li class="lbtno"><a class="lbtni" href="#" >Test 4</a></li>
    <li class="lbtno"><a class="lbtni" href="#" >Test 5</a></li>
    <li class="lbtno"><a class="lbtni" href="#" >Test 6</a></li>
    </ul>
    </div>
1 Like
#2

Hi @Zaaka72

What are you trying to achieve with your code? I don’t understand what your problem is. All elements there are block elements, except a elements.

If what you want is a navegation bar / menu, then you could do something like this:

 .lblist {
  display: flex;
  justify-content: space-between;
/*   flex-flow: row nowrap;  BY DEFAULT */ 
}

But I think it will be easier to help you if you extend your question. Thank you.

Happy coding and good luck!

#3

Sorry for the delay in replying but I have been in hospital. The <ul> does not need to be a horizontal menu, but if you look at the result of the code that i posted, you cannot click on the ‘rounded’ end of the buttons, I just put a few in the

    to show spacing and examples, in my project there may only be one button in the div or three.

1 Like
#4

Hi @Zaaka72

Sorry to here you have been in the hospital. I hope you feel well soon.

I think I have understood the issue. You could give the styles only to the anchor elements, that way the whole button would be clickable, for example:

a { background-color: #FF8600; color:#000; border-radius:20px; padding-left:15px; padding-right:15px; width:150px; height:20px; line-height:20px; text-align:center; margin-bottom:3px; }

This way instead to style li elements, it you know what I mean. You will need to fix the rest, of course.

I hope this helps. Take care and don’t work too much.
Happy coding!!