I have to make a list of buttons to make a link to pages in a document. I cannot make the button inside the anchor to expand to its full content
Even if i put
.linkbutton {
display: block;
min-width: 100%;
}
the size of the button it's still limited to the text inside it. What am I doing wrong?
.pagination {
display: inline-block;
padding-left: 0;
margin: 20px 0;
border-radius: 4px;
}
.pagination>li {
display: inline;
}
.pagination>li:first-child>a, .pagination>li:first-child>span {
margin-left: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.pagination > li > a {
color: #95b047;
}
.pagination>li>a, .pagination>li>span {
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #337ab7;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
}
.linkbutton {
background: none;
color: #95b047;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
}
</style>
<ul class="pagination">
<li><a>
<input type="submit" class="linkbutton" name="page" value="1"></a></li>
<li class="active"><a>2</a></li>
</ul>
Try this-
.pagination {
display: block;
padding-left: 0;
margin: 20px 0;
border-radius: 4px;
}
.pagination>li {
width: 34px;
height: 36px;
display: inline-block;
}
.pagination>li>a, .pagination>li>span {
position: relative;
float: left;
padding: 0;
margin-left: -1px;
line-height: 1.42857143;
color: #337ab7;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.linkbutton {
background: none;
color: #95b047;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
display: block;
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
.pagination a.active {
background-color: #0095ff;
color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<h2>Active and Hoverable Pagination</h2>
<p>Move the mouse over the numbers.</p>
<div class="pagination">
«
1
<a class="active" href="#">2</a>
3
4
5
6
»
</div>
</body>
</html>
Related
I have navigation bar. I want to move the text 50px from left. I can do this?
.navigation {
width: 100%;
height:35px;
background-color: #f1b500; /*f2c255*/
margin-top: 4.4em;
}
.navigation a {
float: left;
display: block;
color: white;
text-align: center;
padding: 8px 25px;
text-decoration: none;
font-size: 100%;
}
.navigation .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 100%;
border: none;
outline: none;
color: white;
padding: 8px 25px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1b500;
min-width: 120px;
box-shadow: 0px 8px 16px 9px rbga(0,0,0,0.2)
z-index: 1;
}
.dropdown-content a {
float: none;
color: white;
padding: 8px 15px;
text-decoration: none;
display: block;
text-align: inherit;
}
.navigation a:hover, .dropdown:hover .dropbtn {
background-color: #34b0ff;
color: black;
}
.dropdown-content a:hover {
background-color: #34b0ff;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
The menu text is now all the way to the left. I would like to move it 50 pixels further to the right. Is the code wrong or do you just need to add something? I tried adding margin-left: 50px; but it does not work. I state that I am a beginner on programming.
<div class="navigation" id="Nav">
Home
<div class="dropdown">
<button class="dropbtn">Dropbutton
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link1
Link2
Link3
</div>
</div>
Test
Test
</div>
This is my html code. I forgot to post it
add padding-left:50px to .navigation. and everything will move to the right 50px
.navigation {
width: 100%;
height:35px;
background-color: #f1b500; /*f2c255*/
margin-top: 4.4em;
padding-left:50px;
}
.navigation a {
float: left;
display: block;
color: white;
text-align: center;
padding: 8px 25px;
text-decoration: none;
font-size: 100%;
}
.navigation .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 100%;
border: none;
outline: none;
color: white;
padding: 8px 25px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1b500;
min-width: 120px;
box-shadow: 0px 8px 16px 9px rbga(0,0,0,0.2)
z-index: 1;
}
.dropdown-content a {
float: none;
color: white;
padding: 8px 15px;
text-decoration: none;
display: block;
text-align: inherit;
}
.navigation a:hover, .dropdown:hover .dropbtn {
background-color: #34b0ff;
color: black;
}
.dropdown-content a:hover {
background-color: #34b0ff;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="navigation" id="Nav">
Home
<div class="dropdown">
<button class="dropbtn">Dropbutton
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link1
Link2
Link3
</div>
</div>
Test
Test
</div>
yeah change your padding to 8px 25px 0px 50px
Either adding padding-left: 50px; or transform: translateY(50px);
How do i fix the navigation bar, so that the drop-down doesn't go over its parent and it's in line with it?
Also, how do i make the "About" tab to be filled when you hover over it? As you can see it only fills some of it, not until the end of the navigation bar.
There is my fiddle: https://jsfiddle.net/Shade1337/29sd0g07/
.navigation {
overflow: hidden;
height: 60px;
border: 3px solid #E3E3E3;
background-color: #1f1d1d;
font-family: Arial, Helvetica, sans-serif;
width: 1078px;
}
.navigation a {
float: left;
font-size: 30px;
color: antiquewhite;
text-align: center;
padding: 18px 20px;
text-decoration: none;
width: 234px;
height: 25px;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
border-style: none;
border-color: inherit;
font-size: 30px;
margin: 0;
outline: none;
color: antiquewhite;
padding: 18px 20px;
background-color: inherit;
font-family: inherit;
width: 214px;
height: 25px;
}
.navigation a:hover, .dropdown:hover .dropbtn {
background-color: #4e3f3f;
}
.dropdown-content {
overflow: hidden;
display: none;
position: absolute;
background-color: #1f1d1d;
min-width: 214px;
box-shadow: 0px 8px 16px 0px rgb(186,179,179);
z-index: 1;
}
.dropdown-content a {
float: none;
color: antiquewhite;
padding: 18px 20px;
text-decoration: none;
display: block;
text-align: center;
}
.dropdown-content a:hover {
background-color: #4e3f3f;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="navigation">
Home
<div class="dropdown">
<button class="dropbtn">Types
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Regular
Cafe latte
Espresso
Cappuccino
</div>
</div>
Shop
About
</div>
Not sure if this is what you want. But here is the solution for what you asked. See the snippet answer.
.navigation {
overflow: hidden;
height: 60px;
border: 3px solid #E3E3E3;
background-color: #1f1d1d;
font-family: Arial, Helvetica, sans-serif;
width: 1078px;
}
.navigation a {
float: left;
font-size: 30px;
color: antiquewhite;
text-align: center;
padding: 18px 20px;
text-decoration: none;
width: 234px;
height: 25px;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
border-style: none;
border-color: inherit;
font-size: 30px;
margin: 0;
outline: none;
color: antiquewhite;
padding: 18px 20px;
background-color: inherit;
font-family: inherit;width:100%;
}
.navigation a:hover, .dropdown:hover .dropbtn {
background-color: #4e3f3f;
}
.dropdown-content {
overflow: hidden;
display: none;
top:71px;
position: absolute;
background-color: #1f1d1d;
box-shadow: 0px 8px 16px 0px rgb(186,179,179);
z-index: 1;
}
.dropdown-content a {
float: none;
color: antiquewhite;
padding: 18px 20px;
text-decoration: none;
display: block;
text-align: center;
}
.dropdown-content a:hover {
background-color: #4e3f3f;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="navigation">
<div style="width:25%;float:left">
Home
</div>
<div class="dropdown" style="width:25%;float:left">
<button class="dropbtn">Types
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Regular
Cafe latte
Espresso
Cappuccino
</div>
</div>
<div style="width:25%;float:left">
Shop
</div>
<div style="width:25%;float:left">
About
</div>
Solution:-
You will add bootstrap css file in your project and use bootstrap classes as per the your requirement
For more Info visit the link:-
https://getbootstrap.com/docs/3.3/getting-started/
The solution for the first problem would be to add height: 100% instead of height: 25px; to .dropbtn class.
And the solution for the second problem would be to change the width of .navigation a and .dropdown and to change padding in .navigation a to padding: 18px 0;
Thus something as follows:
.navigation {
overflow: hidden;
height: 60px;
border: 3px solid #E3E3E3;
background-color: #1f1d1d;
font-family: Arial, Helvetica, sans-serif;
width: 1078px;
}
.navigation a {
float: left;
font-size: 30px;
color: antiquewhite;
text-align: center;
padding: 18px 0;
text-decoration: none;
width: calc(1078px / 4);
height: 25px;
}
.dropdown {
float: left;
overflow: hidden;
width: calc(1078px / 4);
}
.dropdown .dropbtn {
border-style: none;
border-color: inherit;
box-sizing: border-box;
font-size: 30px;
margin: 0;
outline: none;
color: antiquewhite;
padding: 14px 20px;
background-color: inherit;
font-family: inherit;
width: 214px;
height: 100%;
}
.navigation a:hover, .dropdown:hover .dropbtn {
background-color: #4e3f3f;
}
.dropdown-content {
overflow: hidden;
display: none;
position: absolute;
background-color: #1f1d1d;
min-width: 214px;
box-shadow: 0px 8px 16px 0px rgb(186,179,179);
z-index: 1;
}
.dropdown-content a {
float: none;
color: antiquewhite;
padding: 18px 20px;
text-decoration: none;
display: block;
text-align: center;
}
.dropdown-content a:hover {
background-color: #4e3f3f;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="navigation">
Home
<div class="dropdown">
<button class="dropbtn">Types
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Regular
Cafe latte
Espresso
Cappuccino
</div>
</div>
Shop
About
</div>
Here is the fiddle.
I have been working on fixing this but cannot figure out what I am missing. I would like for drop down list to show right below its parent. The list shows but all go to far left and forces the remaining nav items to drop down to another line. i have included a snippet for what is currently looks like and an image of what I want it to look like. Also, I have been trying to figure out how to add down fa fa-caret to nav items with drop down list. Please help!
.navbar {
background: linear-gradient(#9E0A0C, #EBEBEB);
padding: 10px;
border-top: solid 1px #000000;
overflow: hidden;
}
.navbar a {
text-decoration: none;
color: #ffffff;
font-weight: bolder;
font-size: 20px;
text-transform: uppercase;
padding: 3px 5px;
margin: auto;
/*float: left; may need to be removed to show borders*/
display: inline;
}
.navbar ul {
padding: 0;
margin-top: 0;
width: auto;
}
.navbar li {
border-left: solid 2px #000000;
display: inline;
list-style-type: none;
width: 800px;
padding: 0;
}
.navbar a:active {
background-color: #000000;
}
.navbar a:hover {
background-color: #ddd;
color: black;
font-size: 20px;
}
li:first-child {
border-left: none;
}
.dropdown {
display: block;
overflow: hidden;
/*float: left;*/
}
.list {
display: none;
min-width: 50px;
max-width: 150px;
z-index: 2;
box-shadow: 0 8px 16px 0 #e7e7e7;
background: #050243;
}
.list a {
color: #000000;
float: none;
font-size: 14px;
text-decoration: none;
display: block;
text-align: left;
background: #B6B6B6;
columns: 2;
}
.list a:hover {
background-color: #EEEEEE;
}
.dropdown:hover .list {
display: block;
}
form {
float: right;
padding: 0px;
margin: 0;
overflow: auto;
}
input {
border: solid 1px #000000;
background-image: url(pics/search.png);
background-repeat: no-repeat;
background-position: center right;
background-size: 15px;
border-radius: 5px;
padding: 5px 2px;
width: 250px;
}
<div class="navbar">
<ul>
<li>Home</li>
<li class="dropdown">Our Lodge
<div class="list">
NEWS
FACILITIES
OFFICERS
GUEST BOOK
</div>
</li>
<li class="dropdown">Events
<div class="list">
CALENDAR
BINGO
</div>
</li>
<li class="dropdown">Contact Us
<div class="list">
BECOME AN ELK
</div>
</li>
<form action="#">
<input type="text" placeholder="Search.." name="search">
</form>
</ul>
</div>
You can achieve this by first making the div.list element into an absolute positioned. The 'display:block' property was pushing all the other content down to the next row because the block element was taking up space.
As you see now the list is no longer pushing the content down but now it is not aligned to the correct nav item. We are also going to add a left:0 so that the div.list is to the left of the parent property.
Now the parent property needs a position of relative so that the left:0 on the child element is being positioned relative to the parent element.
.dropdown:hover .list {
display: block;
position: absolute;
left: 0;
}
.navbar li {
border-left: solid 2px #000000;
display: inline;
list-style-type: none;
width: 800px;
padding: 0;
position: relative;
}
The problem with your CSS code is, you missed to add position: relative and position: absolute to the .dropdown and .list selectors, which is compulsory to create dropdown. Try this code.
.navbar {
background: linear-gradient(#9E0A0C, #EBEBEB);
padding: 10px;
border-top: solid 1px #000000;
}
.navbar a {
text-decoration: none;
color: #ffffff;
font-weight: bolder;
font-size: 20px;
text-transform: uppercase;
padding: 3px 5px;
margin: auto;
/*float: left; may need to be removed to show borders*/
display: inline;
}
.navbar ul {
padding: 0;
margin-top: 0;
width: auto;
}
.navbar li {
border-left: solid 2px #000000;
display: inline;
list-style-type: none;
width: 800px;
padding: 0;
}
.navbar a:active {
background-color: #000000;
}
.navbar li:hover > a {
background-color: #ddd;
color: black;
}
li:first-child {
border-left: none;
}
.dropdown {
display: block;
overflow: hidden;
position: relative;
/*float: left;*/
}
.list {
display: none;
min-width: 50px;
max-width: 150px;
z-index: 2;
box-shadow: 0 8px 16px 0 #e7e7e7;
background: #050243;
position: absolute;
left: 0;
top: 100%;
}
.list a {
color: #000000;
float: none;
font-size: 14px;
text-decoration: none;
display: block;
text-align: left;
background-color: #B6B6B6;
columns: 2;
}
.list a:hover {
background-color: #EEEEEE;
}
.dropdown:hover .list {
display: block;
}
form {
float: right;
padding: 0px;
margin: 0;
overflow: auto;
}
input {
border: solid 1px #000000;
background-image: url(pics/search.png);
background-repeat: no-repeat;
background-position: center right;
background-size: 15px;
border-radius: 5px;
padding: 5px 2px;
width: 250px;
}
--> Please update following code in your existing file
.navbar {
background: linear-gradient(#9E0A0C, #EBEBEB);
padding: 10px;
border-top: solid 1px #000000;
}
.navbar a {
text-decoration: none;
color: #ffffff;
font-weight: bolder;
font-size: 20px;
text-transform: uppercase;
padding: 3px 5px;
margin: auto;
display: inline;
}
.navbar ul {
padding: 0;
margin-top: 0;
width: auto;
}
.navbar li {
border-left: solid 2px #000000;
display: inline;
list-style-type: none;
width: 800px;
padding: 0;
position: relative;
}
.navbar a:active {
background-color: #000000;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
li:first-child {
border-left: none;
}
.dropdown {
display: block;
overflow: hidden;
}
.list {
opacity: 0;
visibility: hidden;
min-width: 50px;
max-width: 150px;
z-index: 2;
box-shadow: 0 8px 16px 0 #e7e7e7;
background: #050243;
position: absolute;
top: 20px;
left: 0;
transition: 0.3s ease-in-out;
}
.list a {
color: #000000;
float: none;
font-size: 14px;
text-decoration: none;
display: block;
text-align: left;
background: #dddddd;
columns: 2;
}
.list a:hover {
background-color: #EEEEEE;
}
.dropdown:hover .list {
opacity: 1;
visibility: visible;
}
form {
float: right;
padding: 0px;
margin: 0;
overflow: auto;
}
input {
border: solid 1px #000000;
background-image: url(pics/search.png);
background-repeat: no-repeat;
background-position: center right;
background-size: 15px;
border-radius: 5px;
padding: 5px 2px;
width: 250px;
}
<div class="navbar">
<ul>
<li>Home</li>
<li class="dropdown">Our Lodge
<div class="list">
NEWS
FACILITIES
OFFICERS
GUEST BOOK
</div>
</li>
<li class="dropdown">Events
<div class="list">
CALENDAR
BINGO
</div>
</li>
<li class="dropdown">Contact Us
<div class="list">
BECOME AN ELK
</div>
</li>
<form action="#">
<input type="text" placeholder="Search.." name="search">
</form>
</ul>
</div>
The problem is that the elements are not appearing next to each other as I want them to.
all three elements are already on float left and in the right order but they are still not lining up in the right way.
(so probably, the problem is that some elements are position:absolute or relative while they don't need to. The problem is: you can't change that without disrupting the drop-up menu of #Timer. That)
green_button {
background-color: #027fed;
color: white;
border-radius: 2px;
cursor: pointer;
float: right;
position: relative;
}
.green_button:active {
background-color: #eee;
color: black;
}
.keuze {
position: absolute;
width: 100px;
height: 100px;
float: left
}
#timer {
color: black;
background: #eee;
border: none;
padding-left: 10px;
font-size: 12px;
border-radius: 2px;
float: left;
padding: 12px 12px;
cursor: pointer;
list-style-type: none;
position: Relative;
margin-top: -14px;
width: 80px;
}
#timer:hover {
color: white;
background: #027fed;
}
li {
background-color: #eee;
font-size: inherit;
width: 150px;
position: relative;
float: left;
bottom: 31px;
left: 0;
display: block;
font-size: 12px;
text-decoration: none;
font-family: tahoma;
color: black;
width: 50px;
height: auto;
border: 1px solid #;
border-width: 1px 1px 0 0;
background: #eee;
background-color: rgb(238, 238, 238);
padding-left: 10px;
line-height: 38px;
border-radius: 2px;
height: auto;
line-height: 1em;
padding: 5px 10px;
width: 129px;
margin-bottom: 1px;
margin-left: 431px;
}
li:hover {
cursor: pointer;
background-color: #027fed;
color: white
}
.list {
display: none;
list-style-type: none;
position: absolute !important;
}
.keuze:hover .list {
display: block
}
.messages_compose {
padding: 10px;
margin-bottom: auto;
}
.messages_textarea_container {
display: inline-block;
width: 400px;
margin-left: 10px;
}
.messages_textarea {
border: 3px solid lightgray;
margin-top: 0;
margin-bottom: 10px;
padding: 5px;
width: 400px;
height: 40px;
resize: none;
float: left;
border-radius: 2px;
position: absolute;
}
.button {
border: none;
font-size: 12px;
padding: 12px 12px;
height: 40px text-align: center;
}
<div class="messages_compose">
<div class="vraag">CV</div>
<div class="messages_textarea_container">
<textarea class="messages_textarea"></textarea>
<button class="button green_button">Stuur</button>
<ul class="keuze">
<button id="timer">1 Jaar</button>
<div class="list">
<li id="jaar">jaar</li>
<li id="maand">maand</li>
<li id="week">week</li>
<li id="dag">dag</li>
</div>
</ul>
</div>
<script>
document.getElementById("jaar").onclick = function() {
jaar()
};
document.getElementById("maand").onclick = function() {
maand()
};
document.getElementById("week").onclick = function() {
week()
};
document.getElementById("dag").onclick = function() {
dag()
};
</script>
<script src="../scripten.js"></script>
</div>
If you want them side by side (if width allows), to make things simpler, make sure they are inline elements.
textarea and button are inline elements by default and unsorted-list are block element by default
Inline Elements
Block Elements
So basically, all you need is to change your ul to display: inline-block;
* {
padding: 0;
margin: 0;
vertical-align: text-top;
}
green_button {
background-color: #027fed;
color: white;
border-radius: 2px;
cursor: pointer;
}
.green_button:active {
background-color: #eee;
color: black;
}
.keuze {
display: inline-block; /* added */
width: 100px;
list-style: none;
}
.keuze li {
width: 100%;
}
#timer {
color: black;
background: #eee;
border: none;
padding-left: 10px;
font-size: 12px;
border-radius: 2px;
padding: 12px 12px;
cursor: pointer;
list-style-type: none;
width: 80px;
}
<div class="messages_compose">
<div class="vraag">CV</div>
<div class="messages_textarea_container">
<textarea class="messages_textarea"></textarea>
<button class="button green_button">Stuur</button>
<ul class="keuze">
<button id="timer">1 Jaar</button>
<div class="list">
<li id="jaar">jaar</li>
<li id="maand">maand</li>
<li id="week">week</li>
<li id="dag">dag</li>
</div>
</ul>
</div>
</div>
In addition, I have removed all your float and position from your css which I think as #Temani Afif says, you were just trying fix the issue by adding more to it.
I also have added followings just to make it tidier which is irrelevant to your issue. (That is to remove the default margin, padding and vertical align from all html elements to make it tidier and avoid unexpected behavior of different browsers)
* {
padding: 0;
margin: 0;
vertical-align: text-top;
}
I want to put an html code in my wordpress widget, to show something in top of my page, here's the code, but the last float which is the Phone numbers that i wanna put in the left of the button that are already in the right, its just not working well and it will stay right beside the buttons, i appreciate if you can help me out what is wrong and why.
thank you.
section ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
}
section li {
float: right;
border-right: 5px solid;
border-color: white;
}
section li:last-child {
border-right: none;
}
section li p {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
section .button {
display: inline-block;
border-radius: 10px;
background-color: #955251;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 16px;
width: 120px;
height: 45px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
align-items: center;
}
section .button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
section .button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
section .ultopnav a:link:active,
a:visited:active {
color: white;
text-decoration: none;
cursor: auto;
}
section .ultopnav a:link {
text-decoration: none;
color: white;
}
section .ultopnav a:visited {
text-decoration: none;
color: white;
}
.ultopnav .floatleft {
color: black;
font-size: 14px;
}
<section>
<ul class="ultopnav">
<li><button class="button" style="vertical-align:middle"><span>خانه </span></button></li>
<li><button class="button" style="vertical-align:middle"><span>صفحه اول فروشگاه </span>
</button></li>
<li>
<p class="floatleft" style="float: left;">تلفن: 77863967 - 021 | فکس: 77267261 - 021</p>
</li>
</ul>
You are trying to float the <p> left within the <li> when you should actually float the <li> left, like so:
section ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
}
section li {
float: right;
border-right:5px solid;
border-color: white;
}
section li:last-child {
border-right: none;
}
section li p {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
section .button {
display: inline-block;
border-radius: 10px;
background-color: #955251;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 16px;
width: 120px;
height: 45px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
align-items: center;
}
section .button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
section .button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
section .ultopnav a:link:active, a:visited:active {
color: white;
text-decoration: none;
cursor: auto;
}
section .ultopnav a:link {
text-decoration: none;
color: white;
}
section .ultopnav a:visited {
text-decoration: none;
color: white;
}
.ultopnav .floatleft {
color: black;
font-size: 14px;
}
<body>
<section>
<ul class="ultopnav">
<li>
<button class="button" style="vertical-align:middle; align: right">
<span>خانه </span>
</button>
</li>
<li>
<button class="button" style="vertical-align:middle">
<span>صفحه اول فروشگاه </span>
</button>
</li>
<li style="float: left;">
<p class="floatleft">تلفن: 77863967 - 021 | فکس: 77267261 - 021</p>
</li>
</ul>
</section>
</body>
issue is that you use float:left for <p tag.instead you need to use it for <li> tag.
please try this code..
section ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
}
section li {
float: right;
border-right:5px solid;
border-color: white;
}
section li:last-child {
border-right: none;
}
section li p {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
section .button {
display: inline-block;
border-radius: 10px;
background-color: #955251;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 16px;
width: 120px;
height: 45px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
align-items: center;
}
section .button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
section .button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
section .ultopnav a:link:active, a:visited:active {
color: white;
text-decoration: none;
cursor: auto;
}
section .ultopnav a:link {
text-decoration: none;
color: white;
}
section .ultopnav a:visited {
text-decoration: none;
color: white;
}
.ultopnav .floatleft {
color: black;
font-size: 14px;
}
<section><ul class="ultopnav">
<li><button class="button" style="vertical-align:middle"><span>خانه </span></button></li>
<li><button class="button" style="vertical-align:middle"><span>صفحه اول فروشگاه </span>
</button></li>
<li style="float: left;"><p class="floatleft">تلفن: 77863967 - 021 | فکس: 77267261 - 021</p></li>
</ul>
</section>
Try this:
section li:last-child {
border-right: none;
float: left;
}