Learn how to code HTML and CSS to align the buttons horizontally for a page.
CSS Code
The following CSS code will set the properties for the class relative assigned to the div element. The main part of the below code is the CSS for class navitem. The class navitem will be assigned to the button element in the HTML code.
<style>
.relative {
padding: 10px;
position: relative;
background-color: #fff;
margin: 10px;
}
.navitem {
display: inline-block;
width: 70px;
height: 30px;
text-align: center;
border: gray;
background-color: #E8562A;
color: #fff;
cursor: pointer;
font-weight: bold;
}
</style>HTML Code
<body>
<div class="relative">
<h1>Align Buttons Horizontally Example</h1>
<p>Here’s some content in the paragraph and the buttons
<button class="navitem">Item 1</button>
<button class="navitem">Item 2</button>
<button class="navitem">Item 3</button>
</p>
</div>
</body>Output
Align Buttons Horizontally Example
Here’s some content in the paragraph and the buttons
Complete HTML Example
<!DOCTYPE HTML>
<html>
<head>
<style>
.relative {
padding: 10px;
position: relative;
background-color: #fff;
margin: 10px;
}
.navitem {
display: inline-block;
width: 70px;
height: 30px;
text-align: center;
border: gray;
background-color: #E8562A;
color: #fff;
cursor: pointer;
font-weight: bold;
}
</style>
</head>
<body>
<div class="relative">
<h1>Align Buttons Horizontally Example</h1>
<p>Here’s some content in the paragraph and the buttons
<button class="navitem">Item 1</button>
<button class="navitem">Item 2</button>
<button class="navitem">Item 3</button>
</p>
</div>
</body>
</html>