I have a list with bullets. I made the bullets smaller by putting the li text inside a span and making the font-size of the li smaller than that of the span. The problem is that now the bullets are not vertically aligned in relation to the text. How do I fix that?
jsFiddle: http://jsfiddle.net/tXzcA/
li {
font-size: 15px;
}
li span {
font-size: 25px;
}
<ul>
<li><span>text1</span></li>
<li><span>text2</span></li>
<li><span>text3</span></li>
<li><span>text4</span></li>
</ul>
You could just make your own bullet point and make it whatever size you want.
li{
font-size: 15px;
list-style-type:none;
}
li span{
font-size: 25px;
}
ul li:before {
content: "•";
font-size: 80%;
padding-right: 10px;
}
Just change around the font-size to the size you want.
jsFiddle
Try this:
li span{
font-size: 25px;
vertical-align:middle;
padding-bottom:5px;
}
See it here: http://jsfiddle.net/tXzcA/19/
This is what I used, it centers on both the bullet & the content
Jsfiddle: http://jsfiddle.net/VR2hP/14/
CSS:
ul {
padding-left: 5em;
list-style: none;
}
li.twitter::before,
li.fb::before {
font-family: 'FontAwesome';
margin: 0 .2em 0 -1.5em;
font-size: 3em;
vertical-align: middle;
}
li.twitter::before {
content: '\f081';
}
li.fb::before {
content: '\f082';
}
li {
list-style-type: none;
}
li span {
display: inline-block;
vertical-align: middle;
}
Use an unordered list and display the list items as tables.
Take a look at this example: https://jsfiddle.net/luenib/jw1ua38v/
The icon, number, or whatever you want to place is going to be located inside a span. The content of the span is centered horizontally and vertically, very useful if you don't want to display your icon on the top. The text inside the paragraph will keep a space to its left, so it won't go under the icon in case the text extends in more than one line.
CSS:
ul {
padding-left: 0;
}
li {
display: table;
}
li span {
width: 40px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
HTML:
<ul>
<li><span>1</span>
<p>Some text here. Some text here. Some text here. Some text here. Some text here. Some text here.</p>
</li>
<li><span>2</span>
<p>Some text here. Some text here. Some text here.</p>
</li>
</ul>
Related
I am trying to make the menu links (under Menu) on the following website fill the full width of the bar. So when you have "Soup & Salad" as active, it extends all the way to the left of the blue bar. There should also be no space between blocks when you hover over the link next to the active state.
http://www.woodonwellington.com/
ul#menuNav
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
background-color: #0c0648;
padding-top: 13px;
padding-bottom: 12px;
}
#menuNav li
{
display: inline;
list-style-type: none;
}
#menuNav a {
padding-top: 13px;
padding-bottom: 13px;
padding-left: 20px;
padding-right: 20px;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
color: #fff;
cursor: pointer;
}
It happens because your li is set to display:inline; In your code you have an enter and a couple of spaces/tabs between the <li></li> blocks. To fix this you have to write the tags right after eachother. You want to limit the space between those <li> tags.
In stead of this:
<ul>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
Do this:
<ul>
<li>
Content
</li><li>
Content
</li><li>
Content
</li>
</ul>
Answer on comment:
The same problem appeared on the link itself. As you can see on the image below you made the li elements touch eachother.
Now to make the links touch eachother you have to do the same.
Instead of:
<li>
<a>Link</a>
<li>
Do this:
<li><a>
Link
</a><li>
It is not a nice solution but it will fix your spacing between the links.
you could use display:table/table-cell to acomplish this:
basic CSS to apply:
#menuNav {
display:table;
width:100%;
border-collapse:collapse;
}
#menuNav li{
display:table-cell;
}
#menuNav li a {
display:block;
text-align:center;
}
remove any floats from CSS to test this. float kills display (unlesss set to flex, but this is another option)
You can simply remove the display: inline; in your .css and add float:left;
#menuNav li
{
list-style-type: none;
background-color:red;
float:left;
}
This will remove all the spaces.
Check this
http://jsfiddle.net/BishanMeddegoda/30w56oft/
I have an unordered list with list-style-type:none to which I manually added bullets using :before.
The problem here is that if a paragraph inside one of the <li>s gets long enough to wrap around, the width of the paragraph itself will be too long to fit behind the bullet and so it gets pushed to a new line:
ul {
list-style-type: none;
padding: 0;
}
li {
padding:0 0 0 .5em;
}
li:before {
content:"- ";
position:relative;
vertical-align: top;
}
li > p {
display:inline-block;
margin:0;
/*max-width:calc(100% - 2em);*/
}
<ul>
<li><p>Looks normal</p></li>
<li><p>Looks normal with a<br>line break too.</p></li>
<li><p>If a line is long enough, it wraps (as it should) and the layout is somehow destroyed. Just adding some more text to make sure the text wraps.</p></li>
</ul>
http://jsfiddle.net/1xaamone/
As you can see in my example, I already have a workaround, but I wonder if there's a solution that works without calc() to improve browser compatibility even further.
Set white-space: nowrap on the parent li element and then reset that by setting white-space: normal on the child p element:
Updated Example
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 0 .5em;
white-space: nowrap;
}
li::before {
content: "- ";
position: relative;
vertical-align: top;
}
li > p {
display: inline-block;
margin: 0;
white-space: normal;
}
<ul>
<li><p>Looks normal</p></li>
<li><p>Looks normal with a<br>line break too.</p></li>
<li><p>If a line is long enough, it wraps (as it should) and the layout is somehow destroyed. Just adding some more text to make sure the text wraps.</p></li>
</ul>
Alternatively, you could also absolutely position the pseudo element relative to the parent li element and then displace it with padding.
Updated Example
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 0 .5em;
position: relative;
}
li::before {
content: "- ";
position: absolute;
top: 0;
left: 0;
}
li > p {
display: inline-block;
margin: 0;
}
<ul>
<li><p>Looks normal</p></li>
<li><p>Looks normal with a<br>line break too.</p></li>
<li><p>If a line is long enough, it wraps (as it should) and the layout is somehow destroyed. Just adding some more text to make sure the text wraps.</p></li>
</ul>
Simply removing the <p> tags also works.
Example
<ul>
<li>Looks normal</li>
<li>Looks normal with a<br>line break too.</li>
<li>If a line is long enough, it wraps (as it should) and the layout is somehow destroyed. Just adding some more text to make sure the text wraps.</li>
ul {
list-style-type: none;
padding: 0;
}
li {
padding:0 0 0 .5em;
}
li:before {
content:"- ";
position:relative;
vertical-align: top;
}
li > p {
display:inline-block;
margin:0;
/*max-width:calc(100% - 2em);*/
}
Right now this displays as: text 1 2 3 4 with the list appearing horizontally inline with the text. Is there a way to make the list display vertically while still remaining inline with the text? (instead of text 1 2 3 4, the 2 should appear below the 1, 3 below the two, etc. but the list will still appear to the right of "text" and in the same line as "text")
Any help is appreciated. Thanks!
HTML
<div id = "text">text</div>
<ul id="ulist">
<li id="contents">1</li>
<li id="contents">2</li>
<li id="contents">3</li>
<li id="contents">4</li>
</ul>
CSS
#ulist {
display: inline-block;
margin: 0;
padding: 0;
}
#contents {
display: inline-block;
}
#text {
display: inline;
}
#text2 {
display: inline;
}
Sure, get rid of your rules and just float the div to the left:
#text {
float:left;
}
Note that IDs must be unique.
jsFiddle example
Add display:block; to your li elements, modify #text to display:inline-block and vertical-align: top, and that should cause them to stack.
#ulist {
display: inline-block;
margin: 0;
padding: 0;
}
#ulist li {
display: block;
}
#contents {
display: inline-block;
}
#text {
display:inline-block;
vertical-align:top;
}
#text2 {
display: inline;
}
I am using the following (simplified) code to vertically center a hyperlink within a UL. I know it may appear strange that I am applying the style to the hyperink rather than the li, but I require the entire list element to be clickable.
My code works just as intended, however as you can see on this jsFiddle the vertical centering is a little off.
Can anyone advise why this is? Thanks in advance.
HTML
<ul>
<li>
<a href="/">
<label>Foo</label>
<span>Bar</span>
</a>
</li>
</ul>
CSS
ul
{
list-style: none;
}
ul
{
height: 100px;
line-height: 100px;
}
li, li a
{
display: inline-block;
}
li a
{
line-height: 18px;
padding: 5px 10px;
color: #FFF;
text-decoration: none;
}
li label
{
float: left;
}
li span
{
float: right;
}
The line-height on your "ul" is whats moving the link up and down, if you increase it to about 120px it centers it.
Get rid of display:inline-block; on li a.
Demo
I have list items that displayed inline.
I want to align them vertically inside the green div.
<div id="topMenu" class="topMenu">
<ul>
<li>Home</li>
<li>About</li>
<li>Documents</li>
<li>Articles</li>
<li>Info</li>
</ul>
</div>
.topMenu li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
.topMenu a
{
color: White;
font-weight: bold;
text-decoration: none;
}
.topMenu
{
background-position: center;
background-color: Green;
height: 30px;
font-family: arial, Helvetica, sans-serif;
font-size: 0.8em;
vertical-align: middle;
text-align:center;
}
online demo
You could add line-height:30px; to your li elements, (the same as the height of the menu bar)
Demo
You can just the display of your <li> elements a bit, like this:
.topMenu li
{
display: inline-block;
list-style-type: none;
padding: 6px 10px;
}
Check out an updated demo here
Alternatively, you could add the padding to the <ul> with a new rule:
.topMenu ul {
padding-top: 6px;
}
Check out that version here
In either case you may want to remove the height from .topMenu and let the top/bottom padding determine it, so when the page scales with zoom on older browsers it still looks "right".
You have to go with the padding property if you want to be strict xhtml and delete vertical-align.
Furthermore it makes no sense to try to align something vertically, that is displayed inline.
Just consider: padding is the inner space between the element and the boxmodel border.
Internet Explorer didn't support inline-block until version 8.
You might try the work-around here.