Menu
I have a list i want to add to a <div>. Each listitem contains a <div> which in turn contain an image and a text string. The list must be vertical. I ve tried putting display:block for the <ul> with width:100% but the list is flowing left to right horizontally. How do I make the list vertical?
804
(This is an old question, I know) There are two scenarios here: 1) if you want the text alignment to be center, then use text-align: center on the ul ; but if you want the list itself to be centered on the screen with the text still left aligned, then define a width or max-width property and add margin-left: auto; ...
By default, the HTML <ul> list will be rendered vertically with one list item on top of another. When you need to create a list that expands horizontally, you need to add the display:inline style to the <li> elements of the list.
Use Padding property Horizontally: Padding property is used to set the element align to Horizontally by using left and right padding. Output: Use Padding property Vertically: Padding property is used to set the element align to Vertically by using top and bottom padding.
To make a vertical line, use border-left or border-right property. The height property is used to set the height of border (vertical line) element. Position property is used to set the position of vertical line. Example 1: It creates a vertical line using border-left, height and position property.
Try putting display: block in the <li> tags instead of the <ul>
197
I would add this to the LI's CSS
.list-item { float: left; clear: left; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
