Is it possible to apply table-cell to a nested element?
In the code below ive applied display table to the ul. To keep my code clean (there are a number of override to consider in my actual code, the example below is simplified) it would be best if I could target the links directly and forget about the list items. Is this possible?
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
ul {
display: table;
width: 100%;
}
/* This works when uncommented
li {
display: table-cell;
}
*/
/* This doesnt work */
a {
display: table-cell;
}
http://codepen.io/pen/
Buuilding on #Pete comment that it would mean that the a would be a table cell in it's own right rather than as part of the ul "table"
Of course you could dispense with the ul/li completely and just wrap the a tags in a nav (or div) tag...that would work.
Jsfiddle Demo of both methods
CSS
* {
margin: 0;
padding: 0;
}
ul,nav {
display: table;
width: 100%;
text-align: center;
}
li {
display: table-cell; /* method 1 */
}
nav a {
display: table-cell; /* method 2 */
}
ul {
display: table;
width: 100%;
}
li {
display: table-row;
}
a {
display: table-cell;
}
Related
I want to align the contents / below mentioned links in one single straight line. I have entered them in my drupal 7 website. Any CSS help . I am unable to figure out.
Give li elements float:left or inline-block should work
Something like this should do it.
h1 {
text-align: center;
}
nav {
width: 100%;
}
nav {
display: flex;
justify-content: center;
}
ul {
display: flex;
margin: 0;
padding: 0;
list-style: none;
}
li:not(:last-child) {
margin-right: 1rem;
}
<h1>Looking for</h1>
<nav>
<ul>
<li>Blogs</li>
<li>Forums</li>
<li>FAQ</li>
<li>Support</li>
</ul>
</nav>
Thanks all. I used a table and i entered the contents in a table row.
I have a nav element with an unordered list and several items. I am using Flexbox to ensure sufficient width between the items and account for Media Queries. However, My background-color property isn't spanning the entire width/height of the navbar. Do I need to set these properties on a different element?
nav {
background-color: #dddddd;
& ul {
display: flex;
width: 100%;
list-style-type: none;
& li {
flex-grow: 1;
flex-shrink: 1 auto;
flex-basis: 100%;
}
& li a {
text-decoration: none;
}
}
}
<nav>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<ul>
</nav>
1st. Close your ul with </ul>
2nd. Are you talking about the margin at left and right? By default, body have an 8px margin.
If you add this will remove it:
body {
margin: 0;
}
Also, I compiled your SASS to CSS just showing the example here.
The following could be really helpful to understand the default CSS value for each HTML elements.
Default CSS Values for HTML Elements
https://www.w3schools.com/cssref/css_default_values.asp
body {
margin: 0;
}
nav {
background-color: #dddddd;
}
nav ul {
display: flex;
width: 100%;
list-style-type: none;
}
nav ul li {
flex-grow: 1;
flex-shrink: 1 auto;
flex-basis: 100%;
}
nav ul li a {
text-decoration: none;
}
<nav>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
</nav>
I've been attempting to build a navigation using display: table. The code is a simple div as display: table, a ul for the display: table-row and each li as display: table-cell.
Each li has an a tag inside and I simply want to add a margin to a tag for the active page in the navigation defined by an .active class, however it seems to add the margin for every li.
Any idea what is going on here?
Working example: http://jsfiddle.net/Gxpb3/4/
Code
<div>
<ul>
<li>Pie</li>
<li>Pie</li>
<li>Pie</li>
<li class="active">Pie</li>
<li>Pie</li>
<li>Pie</li>
</ul>
</div>
div {
margin-top: 50px;
display: table;
width: 100%;
}
ul {
display: table-row;
max-width: 400px;
margin: 0 auto;
}
li {
display: table-cell;
text-align: center;
background: red;
height: 50px;
}
a {
color: #fff;
display: block;
background: black;
}
li.active a {
margin-top: 5px;
}
a:hover {
background: grey;
}
Well I've figured it out. Strangely, all the li elements increase in size when margin is added to one of the a tags. Adding vertical-align with any value seems to prevent them expanding and produces the desired effect.
However, I have no idea why this happens.
Fiddle: http://jsfiddle.net/2DGjV/
Something has bugged me for years. If you look at this fiddle
you'll see a simple unordered list with some padding on the a element and a background colour to create a box.
There is white space between each item in the list. How can you get rid of it so the boxes are touching horizontally?
Html is:
<div id="dvLinks">
<ul>
<li>One
</li>
<li>Two
</li>
<li>Three
</li>
</ul>
</div>
css is:
#dvLinks ul {
margin: 0;
padding: 0;
list - style - type: none;
}
#dvLinks ul li {
display: inline;
}
#dvLinks ul li a {
text - decoration: none;
padding: .1em 1em;
color: #000;
background-color: # 33EEDD;
}
There are several ways. A few are:
1) Remove thew white space between the list item elements:
<li>One</li><li>Two</li><li>Three</li>
jsFiddle example
2) Put HTML comments between the list item elements
<li>One</li><!--
--><li>Two</li><!--
--><li>Three</li>
jsFiddle example
3) Float them left:
#dvLinks ul li {
display: inline;
float:left;
}
jsFiddle example
It's very simple:
CSS
#dvLinks ul li { display: table-cell; }
RESULTS
inline leaves white-space between elements.
Write elements on same line rather than writing them on different lines.
Change
<li>One</li>
<li>Two</li>
<li>Three</li>
to
<li>One</li><li>Two</li><li>Three</li>
Updated fiddle here.
You have to set the ul font-size to 0 and then you have to set the font-size of the li in what ever your like
#dvLinks ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 0;
}
#dvLinks ul li { display: inline; font-size: 16px; }
#dvLinks ul li a
{
text-decoration: none;
padding: .1em 1em;
color: #000;
background-color: #33EEDD;
}
See the Demo here
This is a common problem with the inline/inline-block.
Another solution is the following:
// All elements in one line
<ul><li>Element #1</li><li>Element #2</li>...</ul>
// Or
// No space between li elements
<ul><li>
Element #1</li><li>
Element #2</li>...
</ul>
// Or
// Comments between li elements
<ul><li>
Element #1</li><!--
--><li>Element #2</li><!--
...-->
</ul>
// Or by using CSS
// Change the li display attribute to
ul li
{
display : table-cell;
}
Anyway, best solution for me is the float left. You can do it like that:
<ul id="list" class="clearfix">
<li>Element #1</li>
<li>Element #2</li>
<li>Element #3</li>
</ul>
and in CSS
/* Clear fix resource : http://www.webtoolkit.info/css-clearfix.html */
.clearfix:after
{
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix
{
display: inline-block;
}
html[xmlns] .clearfix
{
display: block;
}
* html .clearfix
{
height: 1%;
}
#list li
{
display : block;
float : left;
}
You can use negative margins.
#dvLinks ul li {
margin: 0 -1px;
}
You could add
li { margin-left: -5px;}
http://jsfiddle.net/3gmZa/6/
I have an evenly distributed menu like :
HTML
<nav>
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
<li>Blog
</li>
</ul>
</nav>
CSS
nav ul {
padding:0;
margin:0;
text-align: justify;
text-transform: uppercase;
background-color: #000;
}
nav ul:after {
content:'';
width: 100%;
display: inline-block;
height: 0;
line-height: 0;
font-size: 0px;
}
nav ul li {
display: inline-block;
}
nav ul li a {
color: #fff;
}
This works great to spread the menu items accross the whole width of the bar as can be seen in this fiddle: http://jsfiddle.net/SjDEX/.
However, you can also see that a result of the ::after element the height of the ul is increased making extra space below the menu items.
Is there a way to get rid of this by making the after element not take up vertical space?
Setting its height to 0 does nothing and changing its display to block or something else breaks the layout.
It is the ul itself that has that height, not the :after, so just add
nav ul {
height: 20px;
}
Fiddle
And this code can be reduced to this:
nav ul:after {
content:'';
width: 100%;
display: inline-block;
}