Here is my code:
ul li {
display: inline-block;
position: relative;
top: -15px;
width: 800px;
border: 1px solid gray;
}
#home {
position: relative;
margin-left: -35px;
display: inline-block;
}
<nav>
<ul>
<li><a class="vari" href="..." id="home"><span>Home</span></a>
</li>
<li><a class="vari" href="">Music videos</a>
</li>
</ul>
</nav>
The “Music videos” text doesn’t get a full border but something and the “Home” text doesn’t get any border — why?
I want a border and a width of 800px for both of them.
Please check this fiddle Demo. As you need both menu in one line so i used display:inline-block on a and border on ul. Hope this will solve your issue. Ty
You need to remove the margin-left property:
#home {
position:relative;
display:inline-block;
}
Try to check this codepen: http://codepen.io/anon/pen/LVwdXj
Check this link https://jsfiddle.net/5n6e5vx9/ .Remove margin-left from home id
#home {
position:relative;
//margin-left:-35px;
display:inline-block;
}
Remove margin-left:-35px; as this property is keeping 'Home' out of the border.
please try this one:
Demo
Css Code:
ul li {
display: inline-block;
position: relative;
top: -15px;
width: 800px;
border: 1px solid gray;
}
#home {
position:relative;
display:inline-block;
text-decoration:none;
padding:5px;
}
#music
{
text-decoration:none;
padding:5px;
}
Related
I'd like to add a blue dot down below the menu. (Only with current page)
How should I do with CSS?
https://dayup5.website/home/
Please help, Thank you.
<Nav>
<m1>首頁</m1><br><m2>Top</m2>
</Nav>
#Nav{
text-align:center;
line-height:1;
}
m1{
font-size:14px;
letter-spacing:6px;
font-weight:lighter;
}
m2{
font-size:8px;
letter-spacing:2px;
-webkit-transform:scale(0.67);
display:inline-block;
font-weight:lighter
}
Consider using css ::before or ::after pseudo element
m1 {
position:relative;
}
m1::before {
background: blue;
width: 5px;
height: 5px;
content: " ";
position: absolute;
top:20px;
left: 50%;
margin-left:-2.5px;
display: inline-block;
border-radius: 50%;
}
<Nav>
<m1>首頁</m1><br>
</Nav>
I'd like to have an image slideshow with a next button that forms the entire right border of the image. Would it be possible to have the words "NEXT" display in the center of the red area, instead of on the same line as the image?
<ul>
<li></li>
<span>NEXT</span>
</ul>
li {
display: block;
width:200px;
height:100px;
display: inline-block;
border:1px solid;
}
span {
background-color:red;
padding-top:100px;
}
Fiddle here:
http://jsfiddle.net/PUQNg/217/
You have a few things wrong with your HTML and CSS that you should correct:
span is not a valid child of ul, make this a li instead
There's no point having display: block; and display: inline-block; on li, only the last display property will be used
To centralise the text in this case I would use a line-height set to the height of the li.
li {
border: 1px solid #000000;
display: inline-block;
height: 100px;
vertical-align: middle;
width: 200px;
}
.next {
background-color: red;
border: 0;
line-height: 100px;
width: auto;
}
<ul>
<li></li>
<li class="next">NEXT</li>
</ul>
After checking similar questions to this, none of the recommended solutions worked for me. I am trying to align li elements to be vertically centered in their div:
HTML:
<div id="navi">
<ul id="navilist">
<li><a href="#home">
<img src="Images/homelnk.jpg" alt="Home"/></a></li>
<li>SGU</li>
<li>SGJR</li>
<li>REGISTRATION</li>
<!--<li>PHOTO GALLERY</li>-->
<li>SCHOLARSHIP</li>
<!--<li>CONTACT US</li>-->
<!--<li>SOCIAL MEDIA</li>-->
<li>MERCHANDISE</li>
<li>FORMS</li>
<li>PAY FOR SGU</li>
</ul>
</div>
CSS:
#navi {
position: relative;
height: 50px;
width:auto;
background: #ed7a4f;
vertical-align:middle;
}
#navi li{
display: inline;
list-style-type:none;
padding: 0px 2px 5px 2px;
}
How would I maintain a horizontal list, but center the text vertically?
There's some tricks to getting vertical alignment to work. Here's a good stackoverflow answer about it. There's a good comment to the answer which explains why you need the empty span...
Well, I figured I'd offer you an alternative. You use an empty <span>
because vertical-align aligns elements relative to their siblings. If
an element has no siblings, it will not be vertically aligned.
I also made an update to your fiddle
Here's a snippet of the css:
span {
vertical-align: middle;
display: inline-block; }
ul{
margin:0; padding:0;
display:inline-block;
list-style-type:none;
vertical-align:middle; }
#navi {
height: 100px;
background: #ed7a4f;
}
#navi li{
display: inline-block;
padding: 5px; }
You don't need vertical alignment, you just need to reset your CSS and use padding. You need to adjust accordingly to the size of your image.
#navi {
background: #ed7a4f;
}
#navi ul, navi li {
margin:0;
padding:0;
list-style:none;
}
#navi li {
display: inline-block;
}
#navi a {
display:block;
padding: 0px 5px 5px 5px;
}
I have a horizontal parent list. Some of the list items display a nested vertical list when clicked. How do I force the items in the vertical sub list to be the same width as the parent list item?
See jsFiddle.
HTML:
<ul class="mainMenu horizontalMenu bulletless fullWidth bold">
<li class="showSubMenu">
<div>Resumes & Cover Letters ▾ </div>
<ul class="mainSubMenu bulletless">
<li><a>Resumes</a></li>
<li><a>Cover Letters</a></li>
<li><a>Interviews</a></li>
</ul>
</li><li><a>Other Link</a>
</li><li><a>Other Link</a></li>
</ul>
CSS:
.horizontalMenu li{
display: inline-block;
}
.mainMenu > li{
border: 1px solid black;
}
.mainMenu a, .mainMenu div{
display: block;
padding: 10px 20px;
}
.mainSubMenu{
position: absolute;
}
I did the change on your fiddle. http://jsfiddle.net/BXnxc/2/
The parent li needs to have position:relative; and the nested submenu has to have width:100%; and position:absolute;
You can do this by specifying the parent LI as relative and child UL with width: 100%
Demo: http://jsfiddle.net/BXnxc/3/
.horizontalMenu li {
position: relative;
}
.horizontalMenu li ul {
width: 100%;
}
You can also do this by inheriting the width of the containing structures. I set your mainMenu div to width of 200px and then width:inherit for the mainSubMenu.
http://jsfiddle.net/BXnxc/4/
.mainMenu a, .mainMenu div{
display: block;
padding: 10px 20px;
width:200px;
}
.mainSubMenu{
position: absolute;
width:inherit;
}
.mainSubMenu li
{
display: block;
border: 1px solid grey;
width:inherit;
}
I'm looking for a quick cross browser solution to my need for auto margins.
I have a simple list:
<ul>
<li>text</li>
<li>text</li>
<li class="possibly_last">text</li>
</ul>
With a width of 600px.
What I need is CSS code to make sure there is an even margin between each <li>.
So that they stretch across the full 600px evenly.
I may need to as a "last" class, but that's fine.
I just want a browser friendly way to do this.
Any help would be great, Thanks!
Try this:
<style>
li {
display: block;
float: left;
width: 32%;
}
</style>
If that does not work, try this:
<style>
li {
display: block;
float: left;
width: 200px; // or less
}
</style>
I take it you mean you don't want a margin after the last li? In that case, use the CSS :last-child selector:
ul li
{
margin-right: 10px;
width: 190px; // 190px = 200px - margin width
display: inline-block;
zoom: 1;
*display: inline;
}
ul li:last-child
{
margin-right: 0px;
}
Please note that this will NOT work in any internet explorer except IE9. Sorry :-(
As a fix, you could use JavaScript (notably jQuery) to edit the CSS of the last child.
An example here: http://jsfiddle.net/WtLAm/2/
Are you intending to float the list items so they stretch horizontally to fill the ul that way? if so, something like
<style type="text/css" media="screen">
ul {width: 600px;}
li {display: inline; float: left; width: 33%;}
</style>
would work.
I think this can't be done with margins, I suggest you this solution:
http://jsfiddle.net/wY5t6/
css:
ul li {
margin: 0;
display: block;
float: left;
width: 200px;
text-align: center;
}
ul {
width: 600px;
overflow:hidden;
}
If you need to set padding, background etc on list item than you can do it this way:
http://jsfiddle.net/wY5t6/1/
HTML:
<ul>
<li><span>text</span></li>
<li><span>text</span></li>
<li class="possibly_last"><span>text</span></li>
</ul>
CSS:
ul li {
margin: 0;
display: block;
float: left;
width: 200px;
text-align: center;
}
ul {
border: 1px green dotted;
width: 600px;
overflow:hidden;
}
li span {
background: yellow;
padding: 5px;
}