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.
Related
I have a nested unordered list and I have to show them horizontally.
This is a link
enter code here JSFiddle link
Currenly it is showing first link in different line
but I want to display as :
Home News Contact About
You need to set the display to inline-block in li a, that will allow them to stack horizontally.
li a {
display: inline-block;
color: white;
text-align: left;
padding: 16px;
text-decoration: none;
}
To reverse the order use float:right;
If you want the same as in the link.. then just remove the second ul tag which is before News li
Hope this will help you.
The answer to your problem is flexbox, if the element has a style display: flex, you can define the direction of each items inside it (horizontal/ vertical).try this:
.main_menu {
display: flex;
flex-direction: row;
width: 100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
display: inline-block;
display: flex;
flex-direction: row;
}
li a {
display: block;
color: white;
text-align: left;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
<ul >
<li class="main_menu">Home
<ul>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</li>
</ul>
This link will explain a lot about flexbox.
Hope it helps
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>
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;
}
I need a fixed-width table with columns which have a variable width, so depending on their content, but where the horizontal distance between these contents is the same.
This is what I get:
-----------------Table Width-----------------
|----Long Content----|---Content---|--More--|
This is what I want:
----------------Table Width------------------
|---Long Content---|---Content---|---More---|
Please note the count of the minus-sign in the content cells! When you measure the spaces between the content of the columns, by using a screenshot, you'll notice, that they aren't always exactly the same.
This is my markup:
<ul>
<li>Long Content</li>
<li>Content</li>
<li>More</li>
</ul>
This is my not working stylesheet:
ul {
display: table;
width: 600px;
}
li {
display: table-cell;
text-align: center;
border: solid 1px #000;
}
Here is my jsFiddle: http://jsfiddle.net/ATwqk/12/. How can I get the desired result?
If i understand this correctly you could try wrap a div fixed width around the ul. then width:100%; on the ul and width:50% on the li
http://jsfiddle.net/ATwqk/3/
#wrapper{
width:500px;
}
ul {
display: table;
width: 100%;
}
li {
display: table-cell;
text-align: center;
border: solid 1px #000;
width:50%
}
<div id="wrapper">
<ul>
<li>Long Contentdsdddddddddddd</li>
<li>Content</li>
</ul>
</div>
You need the left and right padding properties set to 2.5em. However, this will only work if either there are no breaks or every cell breaks its content.
ul {
display: table;
width: 300px;
}
li {
display: table-cell;
text-align: center;
border: solid 1px #000;
padding: 0 2.5em;
}
Try this on your ul tag. This should do exactly what you want.
ul
{
display: flex;
justify-content: space-between;
width: 600px;
}
Updated jsfiddle:
http://jsfiddle.net/ATwqk/19/
I have the following html:
<div id="footer">
<ul id="menu-utility-navigation" class="links clearfix">
<li class="menu-685 menu-site_map first">Site Map
</li>
<li class="menu-686 menu-privacy_policy">Privacy Policy
</li>
<li class="menu-687 menu-terms___conditions">Terms & Conditions
</li>
<li class="menu-688 menu-contact_us last">Contact Us
</li>
</ul>
</div>
With the following CSS:
div#footer {
font-size: 10px;
margin: 0 auto;
text-align: center;
width: 700px;
}
I threw in the font-size bit just to see if the style was working (Firebug reports it is working but I wanted to see). It is working. But the text is not centered in the footer in Firefox or in Safari (have yet to check it in IE).
I tried with and without margin: 0 auto; and with and without text-align: center; no combo of those things worked.
Here is output from Firebug:
div#footer {
font-size: 10px;
margin: 0 auto;
text-align: center;
width: 700px;
}
Inherited fromdiv#page
#skip-to-nav, #page {
line-height: 1.5em;
}
Inherited frombody.html
body {
color: #666666;
font-family: verdana,arial,sans-serif;
}
Help?
I assume you want all the items next to each other, and the whole thing to be centered horizontally.
li elements are display: block by default, taking up all the horizontal space.
Add
div#footer ul li { display: inline }
once you've done that, you probably want to get rid of the list's bullets:
div#footer ul { list-style-type: none; padding: 0px; margin: 0px }
To make a inline-block element align center horizontally in its parent, add text-align:center to its parent.
If you want the text within the list items to be centred, try:
ul#menu-utility-navigation {
width: 100%;
}
ul#menu-utility-navigation li {
text-align: center;
}
Use display: block; margin: auto;
it will center the div
You can use flex-grow: 1. The default value is 0 and it will cause the text-align: center looks like left.
https://css-tricks.com/almanac/properties/f/flex-grow/
This worked for me :
e.Row.Cells["cell no "].HorizontalAlign = HorizontalAlign.Center;
But 'css text-align = center ' didn't worked for me
hope it will help you
I don't Know you use any Bootstrap version but the useful helper class for centering and block an element in center it is .center-block because this class contain margin and display CSS properties but the .text-center class only contain the text-align property
Bootstrap Helper Class center-block