I have a problem. It might look simple, but I can't fix this.
I have a menu, that shows me 10 items. The 9th item is not aligned in right way, cause has 2 lines of text.
How can I fix this?
JSFIDLE
HTML:
<ul style="list-style:none; width: 615px;">
<li style="display: inline-block;"><a class="butao" href="http://www.ahighplay.org/pt/gca/index.php?id=34&preview=1">DFC Portugal</a>
</li>
<li style="display: inline-block;"><a class="butao" href="http://www.ahighplay.org/pt/gca/index.php?id=30&preview=1">Processo DFC</a>
</li>
<li style="display: inline-block;"><a class="butao" href="http://www.ahighplay.org/pt/gca/index.php?id=72&preview=1">Como Participar</a>
</li>
<li style="display: inline-block;"><a class="butao" href="http://www.ahighplay.org/pt/gca/index.php?id=70&preview=1">Calendário</a>
</li>
<li style="display: inline-block;"><a class="butao" href="http://www.ahighplay.org/pt/gca/index.php?id=71&preview=1">Regulamento</a>
</li>
<li style="display: inline-block;"><a class="butao" href="http://www.ahighplay.org/pt/gca/index.php?id=26&preview=1">FAQ's</a>
</li>
<li style="display: inline-block;">Vídeos
</li>
<li style="display: inline-block;">Notícias
</li>
<li style="display: inline-block;">Parceiros / Patrocinadores
</li>
<li style="display: inline-block;">Contactos
</li>
Add this settings to make the buttons stay on the same line.
ul li {
vertical-align: middle;
}
jsFiddle Demo
Further more, is not advisable to use inline styles (and it repeats itself on every list item). You should move that setting to the CSS, so your code would be:
ul li {
vertical-align: middle;
display: inline-block;
}
Related
You can see that the icon and "sign in" link isn't straight. How do I fix this?
Here is the code:
https://html-css-js.com/?html=%3C!DOCTYPE%20html%3E%0A%3Chtml%20lang=%22en%22%3E%0A%20%20%3Chead%3E%0A%20%20%20%20%3Cmeta%20charset=%22UTF-8%22%20/%3E%0A%20%20%20%20%3Cmeta%20http-equiv=%22X-UA-Compatible%22%20content=%22IE=edge%22%20/%3E%0A%20%20%20%20%3Cmeta%20name=%22viewport%22%20content=%22wi$*$dth=device-wi$*$dth,%20initial-scale=1.0%22%20/%3E%0A%20%20%20%20%3Clink%20rel=%22stylesheet%22%20href=%22styles.css%22%20/%3E%0A%20%20%20%20%3Clink%20rel=%22stylesheet%22%20href=%22https://fonts.googleapis.com/icon?family=Material+Icons%22%3E%0A%20%20%20%20%3Ctitle%3EGoogle%3C/title%3E%0A%20%20%3C/head%3E%0A%20%20%3Cbody%3E%0A%20%20%20%20%3C/ul%3E%0A%20%20%20%20%20%20%3Cli%20class=%22right%20button%22%3E%3Ca%20href=%22#%22%3ESign%20In%3C/a%3E%3C/li%3E%0A%20%20%20%20%20%20%3Cli%20class=%22right%22%3E%3Cspan%20class=%22material-icons%20navigation%20icon%22%20%3Eapps%3C/span%3E%3C/li%3E%0A%20%20%20%20%20%20%3Cli%20class=%22right%22%3E%3Ca%20href=%22#%22%3EImages%3C/a%3E%3C/li%3E%0A%20%20%20%20%20%20%3Cli%20class=%22right%22%3E%3Ca%20href=%22#%22%3EGmail%3C/a%3E%3C/li%3E%0A%20%20%20%20%20%20%3Cli%20class=%22left%22%3E%3Ca%20href=%22#%22%3EAbout%3C/a%3E%3C/li%3E%0A%20%20%20%20%20%20%3Cli%20class=%22left%22%3E%3Ca%20href=%22#%22%3EStore%3C/a%3E%3C/li%3E%0A%20%20%20%20%3C/ul%3E%0A%0A%20%20%3C/body%3E%0A%3C/html%3E%0A&css=*%20%7B%0A%20%20margin:%200;%0A%20%20padding:%200;%0A%20%20font-size:%2012px;%0A%20%20font-family:%20arial,%20sans-serif;%0A%7D%0A%0Ali%20%7B%0A%20%20float:%20right;%0A%20%20list-style-type:%20none;%0A%20%20margin-top:%2020px;%0A%7D%0A%0Aa%20%7B%0A%20%20text-decoration:%20none;%0A%20%20color:%20black;%0A%7D%0A%0A.left%20%7B%0A%20%20float:%20left;%0A%7D%0A%0A.left%20a%20%7B%0A%20%20margin-left:%2020px;%0A%7D%0A%0A.right%20%7B%0A%20%20margin-right:%2020px;%0A%7D%0A%0A.button%20%7B%0A%20%20background-color:%20#4485f4;%0A%20%20padding:%207px;%0A%20%20border-radius:%205%25;%0A%7D%0A%0A.button%20a%20%7B%0A%20%20color:%20#fff;%0A%7D%0A%0A.icon%20%7B%0A%20%20color:%20grey;%0A%7D%0A%0Aa%20%7B%0A%20%20justify-items:%20center;%0A%7D%0A&js=
In your css, you can write this in your ul selector:
ul {
display: flex;
align-items: center;
}
But in this case, rearrange your html code and write them in the order the options are going to be on your navbar.
<ul>
<li class="left">About</li>
<li class="left">Store</li>
<li class="right">Images</li>
<li class="right">Gmail</li>
<li class="right"><span class="material-icons navigation icon">apps</span</li>
<li class="right button">Sign In</li>
</ul>
Another way is to do that is to use line-height in ul.
ul {
line-height: 20px;
}
Although it is not always perfect.
I have
<ul id="list">
<li>
<a href=''>1</a>
</li>
<li>
<a href=''>2</a>
</li>
<li>
<a href=''>3</a>
</li>
<li>
<a href=''>4</a>
</li>
...
<li>
<a href=''>10</a>
</li>
<li>
<a href=''>11</a>
</li>
</ul>
And with style looks like:
I wish to have double digit numers centred like single digits are. I've tried (separately):
#list li{
text-align: center;
align-items: stretch; // and center
margin-left: auto; //with margin right the same
left: 0;
}
But nothing seem's to do the trick
Set text-align to a:
#list li a{
text-align: center;
}
I have created bootstrap menu items and kept FLIP option beside that.
FIDDLE
Here issue is that FLIP should be just beside the box, but it is appearing downside?
HTML:
<div class="magic-container">
<div class="input-group">
<input type="text" class="typeahead form-control" placeholder="Select category ..." />
<ul class="dropdown-menu">
<li id="one">Sports</li>
<li role="presentation" class="divider"></li>
<li id="two">Entertainment</li>
<li role="presentation" class="divider"></li>
<li id="three">Politics</li>
<li role="presentation" class="divider"></li>
<li id="four">Business</li>
<li role="presentation" class="divider"></li>
<li id="four">Travel</li>
<li role="presentation" class="divider"></li>
<li id="four">Celebrity</li>
<li></li>
</ul>
<span class="flip">
<span class="dropDownFlip">
FLIP
</span>
</span>
</div>
</div>
Your input is having a width of 100% being applied to it. It is being applied from the bootstrap.min.css file. By adding the following to your css it fixes your issue:
.input-group .form-control {
width: auto;
}
Here is your jsFiddle updated.
Update: Since this is a change to an existing class and could possibly affect elements elsewhere on your page/site, you could create a new class for this particular instance. Something like this would work:
.input-group .floatLeft {
float: left !important;
width: auto;
}
and just add the class floatLeft to your input.
Try to add following styles in you stylesheets
.magic-container .input-group input {
float: left;
margin-right: 2%;
width: 70%;
}
.flip {
float: left;
}
I have set this:
list-style: none outside none;
And HTML:
<ul class="menu custompozition4">
<li class="item-507">Strategic Recruitment Solutions
</li>
<li class="item-508">Executive Recruitment
</li>
<li class="item-509">Leadership Development
</li>
<li class="item-510">Executive Capability Review
</li>
<li class="item-511">Board and Executive Coaching
</li>
<li class="item-512">Cross Cultutral Coaching
</li>
<li class="item-513">Team Enhancement & Coaching
</li>
<li class="item-514">Personnel Re-deployment
</li>
</ul>
but even though bullets are displayed. (I'm not quite sure that those are ul's bullets, because when you hover the text the "bullets" get underlined.)
Image Demo:
https://i.imgur.com/2wsnBqP.png
The third level from the menu
Have you tried setting
li {list-style-type: none;}
According to Need an unordered list without any bullets, you need to add this style to the li elements.
You can remove the "bullets" by setting the "list-style-type: none;" Like
ul
{
list-style-type: none;
}
OR
<ul class="menu custompozition4" style="list-style-type: none;">
<li class="item-507">Strategic Recruitment Solutions
</li>
<li class="item-508">Executive Recruitment
</li>
<li class="item-509">Leadership Development
</li>
<li class="item-510">Executive Capability Review
</li>
<li class="item-511">Board and Executive Coaching
</li>
<li class="item-512">Cross Cultutral Coaching
</li>
<li class="item-513">Team Enhancement & Coaching
</li>
<li class="item-514">Personnel Re-deployment
</li>
</ul>
ul.menu li a:before, ul.menu li .item:before, ul.menu li .separator:before {
content: "\2022";
font-family: FontAwesome;
margin-right: 10px;
display: inline;
vertical-align: middle;
font-size: 1.6em;
font-weight: normal;
}
Is present in your site's CSS, looks like it's coming from a compiled CSS file from within your application. Perhaps from a plugin. Changing the name of the "menu" class you are using should resolve the issue.
Visual for you - http://i.imgur.com/d533SQD.png
In my case
li {
list-style-type : none;
}
It doesn't show the bullet but leaved some space for the bullet.
I use
li {
list-style-type : '';
}
It works perfectly.
In your css file add following.
ul{
list-style-type: none;
}
you can use it this way to
{
Fdata.map((point,index) =>(
<ul style ={{listStyle:'none'}}key={index} >
<li className="text_paragraph"style={{fontSize:"0.8rem",color:"#ff1100"}}>{point.list}</li>
</ul>
))
}
Try this it works
<ul class="sub-menu" type="none">
<li class="sub-menu-list" ng-repeat="menu in list.components">
<a class="sub-menu-link">
{{ menu.component }}
</a>
</li>
</ul>
I'm making a navbar that consists of icons followed by the title of their page (e.g. Icon of a home followed by the text 'Home'). Let's say I want to change the color of only(!) the icon from black (default) to blue when hovering over either the text or the icon itself using the :hover selector. How can I do that? (I don't want to use jQuery, just CSS)
The markup is now something like this:
<ul id="navbar">
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-home"></i></li>
<li class="navname">Home</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-info"></i></li>
<li class="navname">Information</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-contact"></i></li>
<li class="navname">Contact</li>
</ul>
</li>
</ul>
Of course everything is {display:inline}
Set the hover to the ul inside the navgroups. CSS below does that, you can add whatever styling you like to it.
http://jsfiddle.net/PQShS/9/
CSS:
.navgroup ul:hover .navicon{
color:#FFF;
}
Your Code
<ul id="navbar">
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-home"></i></li>
<li class="navname">Home</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-info"></i></li>
<li class="navname">Information</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-contact"></i></li>
<li class="navname">Contact</li>
</ul>
</li>
</ul>
Since it boils down to changing the look of the icon when the cursor hovers anywhere above the ul element, you can do this:
.navgroup ul:hover .navIcon .icon-home
{
/*hover style for the icon*/
}
.navgroup ul .navIcon .icon-home
{
/*non-hover style for the icon*/
}
You should use the following css:
.navgroup:hover .navicon {
background-color: blue;
}
It will modify just the navicon anytime you hover anywhere within the navgroup
See this jsFiddle
you should use anchor tag
css:
.testing:hover {
color: red;
}
html:
<a class="testing" href="">
<span>hello1</span>
<span style="color:black;">hell2</span>
</a>
Give the whole styling to <a> tag and give the inline styling to other element inside <a> tag that you don't want to change.