I have a horizontal list, I want to be able to click on each of the list items without the following spaces.
HTML:
<ul id="server-header-list">
<li>item1: </li>
<li>item1 value</li>
<li>testing list item2: </li>
<li>value of item2</li>
</ul>
CSS:
#server-header-list li {
display: inline;
list-style-type: none;
padding-right: 7px;
white-space: nowrap;
}
Currently the output looks like this:
item1: item1 value testing list item2: value of item2
This is good. But when I try to click on e.g. value of item2 it selects the whole row instead of only the "value of item2" also when I click on item1, it takes one extra following space with it. Any solutions?
this is because your <li>'s (or <ui>'s but i suspect that's a typo) are displayed as inline. You could do something like this:
li {
display: block;
float: left;
}
this should prevent the whitespace from appearing
I would recommend changing your <ui> tags to <li> as that is what you want I think, <ui> is not a valid tag. This will probably fix it
Related
I have a simple list that displays fine in a single column. I have "text-decoration: none" set for the list items. When I add column-count: 2, the second column displays bullets. Any suggestions for a fix?
I believe you are looking for this:
list-style-type:none;
That is, as long as you don't want any bullet points on your <li>.
Example:
<style>
/* code to make <li> horizontal horizontal */
/* code to remove bullet points from all <li> inside of <ul> tags*/
ul > li { list-style-type: none; }
</style>
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
Or you may use the <table> and achieve this as well. Here is a link that may be of interest regarding tables.
https://www.w3schools.com/html/html_tables.asp
Using Bootstrap 3.3.5 and this markup,
<div id="panelSteps" class="panel panel-default">
<div class="panel-heading hidden-print">Actions</div>
<ol class="item-steps list-group">
<li class="list-group-item">Some action</li>
<li class="list-group-item">Other action</li>
</ol>
</div>
Is is possible to have the list display numbers? I have tried overriding the OL element's style with list-style:decimal inside; and overflow:visible;, etc.I can't get to see the numbers beside the list items.
Thank you!
You'll probably want to play with the styling until it's satisfactory design-wise but this will bring the numbers back:
.item-steps {
margin-left: 20px;
}
.list-group-item {
display: list-item;
}
Here's a fix: https://jsfiddle.net/9ehyyrct/ In the JSFiddle, I use Bootstrap 3.3.6 but it applies to 3.3.5 too.
Unfortunately it's pretty hacky:
.list-group-item {
display: list-item;
margin-left:30px;
}
.list-group-item a {
margin-left:-10px;
}
The items show up when you add display: list-item; but they're hidden outside of the viewport.
Bootstrap sort of kicks your ol's numbers to the left, so adding a margin helps them show. The margin-left on the anchor is to counteract the ugly margin I used to fix the issue. Good luck!
You can use the display value to list-item as said by #Fausto NA and try removing the margin left property and asking the list style position to inside.
.list-group {
list-style-position: inside;
}
.list-group-item {
display: list-item;
margin-left: 0px;
}
Here is the JSFiddle
I have used with Bootstrap 3.0.0
I had a similar issue. I was using an un-ordered list and simply wanted the bullets to display in bootstrap.
I ended up just adding an HTML dot (•) inside the li tag, with some non-breaking white space (for indentation).
<li> • my item</li>
I have an alignment problem with my ol list.
I have a simple list like this:
<ol type="a">
<li><button style="display: inline-block">TEXT1</button></li>
<li><button style="display: inline-block">TEXT2</button></li>
<li><button style="display: inline-block">TEXT3</button></li>
<li><button style="display: inline-block">TEXT4</button></li>
</ol>
when these text are short, I have the text align next to the order character like this:
But when the text are longer, it then jump to the next line instead of align on the same line with the order like this:
Edit: As guys pointed out, I missed some attribute for my LI in order to reproduce the problem. Each LI element also has "list-style-position: inside" css, which I think is the source of the problem.
Is there a way to correct it so that the button will align next to the order instead of jumping to the next line?
It actually looks good. See fiddle. There seems to be other CSS affecting the rendering. Please post the CSS too. If you are worried about having multiple lines, use this:
ol li button {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Since you are having a list-style-position: inside, you can use this:
li {list-style-position: inside;}
li button {width: 90%;}
Demo: Fiddle
I think the best way to describe my problem is to show you.
http://yourinternship.hailstormcommerce.com/?page_id=21
On the sidebar on the left there is a widget that uses ul, a the moment I have a bottom-border applied to the first li and then the border turned off for any child li after that.
My issue is , the border for "Your Internship" at the very top of the widget doesnt appear until its submenu is finished, ie above "Accomodation". But I want it straight underneath "Your Internship" , like the rest of the menu pages. So basically its bordering the entire li. I understand why this is happening, and the only way I was able to get around it was by putting a border underneath ul li a but the problem is this ends up being very messy, for controlling the width of the border etc. (using padding etc).
Has anyone any suggestions on how I could apply a border to the first link?
Also, on the same note , is it possible to remove the last border under "Contact Us"?
Im asking the second question here as well as I guess my overall problem has to do with styling particular parts of a widget from wordpress.
Thanks in advance for any help. Any questions let me know, because I may have made that sound confusing.
Cheers
It's possible. I made a simplified example that you can learn from:
<ul class="widget">
<li class="active">Your Internship
<ul>
<li>Benefit of our program</li>
<li>Students</li>
<li>University</li>
<li>Why Choose Us</li>
<li>Your Internship Process</li>
<li>Your Language Course</li>
</ul>
</li>
<li>Your Accomodation</li>
<li>Your Employers</li>
<li>Information for Interns</li>
<li>Apply Now</li>
<li>Contact Us</li>
</ul>
To get rid of the border on the active and last item use this pseudo selectors:
.widget > li:last-child, .active {
border: none;
}
To re-add a border on the "active" class, I used a pseudo element:
.active:before {
content: "";
width: 100%;
position: absolute;
top: 25px;
border-bottom: 2px solid salmon;
}
Demo
It might be a bit messier than you want to, but here is a suggestion.
To get the line directly underneath "Your Internship" (but still keeping it above "Your Accomdation") you can do the following:
#menu-your-internship-sidebar .current_page_parent > a {
display: block
border-bottom: solid 1px #DDD;
}
For removing the last border under "Contact Us" you just set the li:last-child bottom border to 0, like this:
#menu-your-internship-sidebar li:last-child {
border: none
}
EDIT:
If you want to remove the border above "Your Accomdation":
#menu-your-internship-sidebar > li.current-page-parent {
border: none;
}
<style>
ul{margin:0px;padding:0px;}
ul li{margin:0px 5px 5px 0px;padding:0px;list-style-type:none;float:left;}
</style>
<ul class="clearfix">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
The first li contains more content than the rest.
So, I have the following problem:
problem http://img830.imageshack.us/img830/240/problemc.png
But how do I move the next row down, so it looks like that:
want this http://img440.imageshack.us/img440/9750/solutionm.png
I tried using display:inline-block; instead of float:left; for the lis, which works, but I'd still rather use float:left; over inline-block.
Any ideas on how to do this?
Solution for IE:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
The best solution is to use a little-known display style called table-cell.
I've had to do this a few times. Here's how you do it:
/* -*- CSS -*- */
ul li .wrapper
{
display:table-cell;
width:100px; /*replace here*/
min-height:100px;/* " " */
}
ul li
{
float:left;
display:inline-block;
}
ul
{
display:table;
}
...
<!-- HTML -->
<ul>
<li><div class="wrapper">my-content</div></li>
<li><div class="wrapper">my-content</div></li>
<li><div class="wrapper">my-content</div></li>
<li><div class="wrapper">my-content</div></li>
</ul>
How this works:
When the parser sees that there's a UL object, it treats it like a table instead of a list. This gives you the distinct advantage that you're beginning to /act/ like you're working with tables (but you're not!)
The rule then runs against the wrapper class -- this creates a "Table cell". We don't want to put it in the li because OTHERWISE the li will act as the table cell. This is kinda bad. the work around is that your li is actually aligned left. There's some argument whether or not is a good idea to do it this way -- this is the "Most Effective" because it forces the box model to comply. Its fugly, I know.
the REASON its bad for the li to be treated like a table-cell is that it won't wrap. The reason it wont wrap is that table-cells aren't supposed to wrap.
There is ONE other solution that might work, however I haven't tested it.
/* -*- CSS -*- */
ul li { display: inline-block; float:left; min-height:200px;width:200px; }
Its not as ugly, but it should work by making the box model force the alignment as well.
First of all: Are you sure you're using the right markup? A list generally doesn't end up to look like that.
Second. Do you know how many items you will have on a row? In your image they seem to have the same width. If you know that you can add clear:both; to the forth li (and other you may need) and force it down. This would be the only way to do it with left floating lis.
You can't do this using only float:left; the blocks just fall into place where they fit as your first example shows. If you intend for your content to always display in three columns, you could programmatically clear the float on the first item in each row.