I have tabs like these:
<ul class="nav nav-tabs ">
<li class="active">
<a href="#tab_default_1" data-toggle="tab">
Tab 1
</a>
</li>
<li>
<a href="#tab_default_2" data-toggle="tab">
Tab 2
</a>
</li>
<li>
<a href="#tab_default_3" data-toggle="tab">
Tab 3
</a>
</li>
</ul>
But instead of having them on the left, I'd like them in the center. I tried text-align:center; and even setting margin-left:0 and margin-right:0 but neither is working. What's the easiest way to do this without re-writing the whole code?
Here's a jsFiddle:
http://jsfiddle.net/j751b1mb/
.nav-tabs > li {
float:none;
display:inline-block;
zoom:1;
}
.nav-tabs {
text-align:center;
}
http://jsfiddle.net/j751b1mb/4/
In Bootstrap 4:
<ul class="nav nav-tabs justify-content-center">
You have added a lot of custom CSS, but the easiest Bootstrap way is to use nav-tabs and nav-justified..
http://www.codeply.com/go/upP3lh2gxS
<ul class="nav nav-tabs nav-justified">
<li>..</li>
..
Here is an updated fiddle: http://jsfiddle.net/j751b1mb/5/
The key is to set display: flex on the nav tabs and align them in the center of the page.
.nav-tabs {
display: flex;
justify-content: center;
flex-direction: row;
}
You can get more fine-grained control over the specific position of the tabs by modifying the margins on .tabbable-line > .nav-tabs > li
.tabbable-line > .nav-tabs > li {
margin: auto 2px;
}
The code above will distribute them evenly across the line, for example.
Hope that helps.
try this and replace with this
.nav-tabs > li
{
float: none;
text-align: center;
}
.nav > li
{
display: inline-block;
}
Change in css
.tabbable-line{
text-align:center;
}
/* Default mode */
.tabbable-line > .nav-tabs {
display:inline-block;
}
DEMO
Use text-center or text-middle class on your main element.
Related
This question already has answers here:
Does UL have default margin or padding [duplicate]
(2 answers)
Closed 1 year ago.
I've seen other posts similar to this but they didn't seem to provide a solution. I'm kaing a js calendar and the days are inside a however I cannot get the items to align left, it seems like they are padded on the left side see img below.
I am hoping someone can tell me if theres a way to remove this ghost padding?
many thanks :)
I have included my current code and the css classes I'm currently using. I have a few vue inline styles but
<!--jan-->
<div v-if="month==1" class="month">
<div>
<div>
<b>January</b><br><span> {{this.year}}</span>
</div>
<div>
<ul v-bind:style="{ 'display': 'flex', 'justify-content':'space-between'}">
<li class="prev">❮</li>
<li class="next">❯</li>
</ul>
</div>
</div>
<ul class="weekdays">
<li class="days">Mo</li>
<li class="days">Tu</li>
<li class="days">We</li>
<li class="days">Th</li>
<li class="days">Fr</li>
<li class="days">Sa</li>
<li class="days">Su</li>
</ul>
<ul class="daysList">
<li class="daynum">1</li>
<li class="daynum">2</li>
<li class="daynum">3</li>
<li class="daynum">4</li>
<li class="daynum">5</li>
... etc
</ul>
</div>
<!--jan-->
////css//////
.daysList{
width: 100%;
list-style: none;
display: flex;
flex-wrap: wrap;
text-align: left;
justify-content: left;
background: rgb(231, 131, 131);
}
.daysList li{
background-color: lime;
display: inline;
margin: .5em;
width: 22px;
padding: 5px;
}
.daysList li:hover{
cursor:pointer;
color:white;
background-color: blue;
}
The <ul> has some margin and padding added by the user agent stylesheet. You can remove them from your calendar component's <ul>s with:
<style scoped>
ul {
margin: 0;
padding: 0;
}
</style>
demo
https://codepen.io/arandomcodepenuser/pen/NWjYGwo
Ok, so I have this top navbar, and the problem is that I can't change the html only the styling, because I am using a Wordpress plugin, and this navbar has block elements on the navbar, and there's one of them that has a dropdown within the element and not below, and I can't use javascript to change this, I am wondering if it's possible for the dropdown embedded within the li element to push down the other elements on the navbar when it appears on hover.
Here's the html:
<div>
<ul class="top-bar__menu">
<li id="menu-item-265276" class=""><span>Find Us</span></li>
<li id="menu-item-280208" class="">
<span>About</span>
<ul class="sub-menu">
<li id="menu-item-268209" class=""><span>About Us</span></li>
<li id="menu-item-265276" class=""><span>Find Us</span></li>
<li id="menu-item-280209" class=""><span>Our Team</span></li>
</ul>
</li>
</ul>
</div>
Here's the css styling for the dropdown menu:
.sub-menu {
display: block;
}
.sub-menu li {
clear:both;
width: 100%;
}
ul.sub-menu {
display: inline;
background-color: #fff;
max-width: 100px;
}
I have this vertical that i am trying to customize
<ul class="tracking_nav nav nav-tabs nav-stacked">
<li class="tracking_list_type" style=".tracking_list_type:hover{background-color:none !important}">
<span class="topinfo"><span class="number_plates"><img src="u_online.gif" />Number 10</span></span><span class="moving_status">76 moving</span><br/><span class="link_text">Brother David Cameroon</span><span class="linkso">TrackingPlaybackCommands</span></li>
<li>Tutorials</li>
<li>Practice Editor </li>
<li>Gallery</li>
<li>Contact</li>
</ul>
This is the css
moving_status{
float:right;
color:#76EE00;
font-weight:bold;
}
.linkso{margin-left:13px;}
.topinfo{
display:inline-block;
margin-bottom:5px;
}
.linkso > a{
margin-right:4px;
}
This is the fiddle https://jsfiddle.net/codebreaker87/eoo87zkk/
I have tried .tracking_list_type > li:hover{background-color:none !important;} but i cant seem to target the li element.How can i fix this?.
You need to target hover backgrounds with :hover. For your case, you need the following:
.nav-tabs>li>a:hover
However I would recommend
.nav-tabs>li>a:hover, .nav>li>a:focus, .nav>li>a:hover
I am trying to display the navigation menu show below as inline. However any other changes it gets applied but not the display:inline-block; property.
<div class="container">
<a class="hide" href="#">Close</a>
<header>
<div class="title">
<h1>I'M JAMIE</h1>
<h4>Looking for a development opportunity and much more</h4>
</div>
<nav>
<ul>
<li>About me </li>
<li>Projects</li>
<li>Home</li>
<li>About me </li>
<li>Projects</li>
</ul>
</nav>
</header>
the css code is
header nav ul li a {
display:inline-block;
}
http://jsfiddle.net/33mt8xff/
header > nav > ul > li {
display:inline-block;
}
This will display the list items next to each other.
The > means select the children. Now only li elements that are descendants of the header element get styled.
header > nav > ul > li {
float: left;
margin-right: 10px;
list-style: none;
}
or
header > nav > ul > li {
display: inline-block;
}
I have the following structure in some HTML:
<ul class="li_inline">
<li>
<ul class="li_block">
<li>Stuff</li>
<li>Stuff under stuff</li>
</ul>
</li>
<li>
<ul class="li_block">
<li>Stuff</li>
<li>Stuff under stuff</li>
</ul>
</li>
</ul>
With the CSS like this:
.li_inline li
{
display: inline;
}
.li_block li
{
display: block;
}
What I would like to happen is to have the two inner <ul>s side by side, but any <li>s inside them to be below each other. This is so I can get a sidebar and main body side by side, but elements inside them behave normally (ie. one below the other).
Can someone suggest some CSS I can use so that the inner (li_block) lists' <li> elements are displayed as block elements, but the <ul>s themselves are displayed side by side?
Thanks,
James
Use a reset rule.
ul ul { list-style:none; padding: 5px 20px; margin: 5px 10px; }
In your case using the !important can get your job done. But try not to use it
UPDATE
Solution: http://jsfiddle.net/Starx/KHjmP/ (FF3+, Safari 4+, IE8+)
it ain't pretty but you get the jist of it :)
<div style="overflow: hidden;">
<ul class="li_block" style="float: left;">
<li>Stuff</li>
<li>Stuff under stuff</li>
</ul>
<ul class="li_block" style="float: left;">
<li>Stuff</li>
<li>Stuff under stuff</li>
</ul>
</div>
This worked for me:
<html>
<head>
<style type="text/css">
ul.outer{}
ul.outer > li{
float: left;
}
ul.outer > li > ul > li{
display: block;
}
</style>
</head>
<body>
<ul class="outer">
<li>
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
</li>
<li>
<ul>
<li>2.1</li>
<li>2.2</li>
</ul>
</li>
</ul>
</body>
</html>
You should be able to do something as simple as the following. I tested it in Firefox, Chrome and IE7.
.li_inline > li {
display: inline;
}
.li_inline > li > ul {
float: left;
}
http://jsfiddle.net/fzBnG/
.li_inline li {
display: inline-block;
float: left;
}
.li_block li {
display: block;
clear:both;
}
First, thanks for everyone's help! I'm really sorry to look like I'm ignoring your hard efforts away, but I have taken note of all your answers, and they're all very handy.
The solution I have come up with is to simply use display: inline-block for both inner uls, with the outer one left default.
Once again, thanks for your help everyone.
James