如何使用 HTML/CSS 将按钮移动到屏幕右侧
问题描述 投票：0回答：1
您好，我是 HTML 新手，我正在努力将按钮移动到屏幕的最右侧。这是我想要按钮应该在哪里的图片
如您在上面看到的，我想将按钮放在桌子上方并与桌子右侧对齐。 我尝试过在 css 中使用
margin-leftfloat: right这是我的 HTML 和 CSS 代码：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" type="text/css" href="{{ asset('css/styles.css') }}">
<title>Inventory | Master Kategori</title>
</head>
<body>
<div class="d-flex" id="wrapper">
<!-- Sidebar -->
<div class="bg-white" id="sidebar-wrapper">
<div class="sidebar-heading text-center py-4 primary-text fs-2 fw-bold text-uppercase border-bottom">
<i></i>INVENTORY SYSTEM
</div>
<div class="list-group list-group-flush my-2">
<a href="/"
class="list-group-item list-group-item-action bg-transparent second-text dashboard-button fw-bold"
style="text-decoration: none; color: gray;">
<i class="fas fa-tachometer-alt me-2"></i>Dashboard
</a>
<div class="list-group-item list-group-item-action bg-transparent second-text fw-bold">
<a href="mastercustomer" style="text-decoration: none; color: gray;">
<i class="fas fa-user-circle me-2"></i>Master
</a>
<ul class="list-group list-group-flush my-1" style="margin-left: 15px;">
<li class="list-group-item list-group-item-action bg-transparent second-text fw-bold"
style="padding: 9px">
<a href="mastercustomer" style="text-decoration: none; color: gray;">Master Customer</a>
</li>
<li class="list-group-item list-group-item-action bg-transparent second-text fw-bold"
style="padding: 9px">
<a href="mastersupplier" style="text-decoration: none; color: gray;">Master Supplier</a>
</li>
<li class="list-group-item list-group-item-action bg-transparent second-text fw-bold"
style="padding: 9px">
<a href="masterkategori" style="text-decoration: none; color: gray;">Master Kategori</a>
</li>
</ul>
</div>
<div class="list-group-item list-group-item-action bg-transparent second-text fw-bold">
<a href="stok
" style="text-decoration: none; color: gray;">
<i class="fas fa-box me-2"></i>Storage
</a>
<ul class="list-group list-group-flush my-1" style="margin-left: 15px;">
<li class="list-group-item list-group-item-action bg-transparent second-text fw-bold"
style="padding: 9px">
<a href="stok
"
style="text-decoration: none; color: gray;">Stok</a>
</li>
<li class="list-group-item list-group-item-action bg-transparent second-text fw-bold"
style="padding: 9px">
<a href="list" style="text-decoration: none; color: gray;">List</a>
</li>
<li class="list-group-item list-group-item-action bg-transparent second-text fw-bold"
style="padding: 9px">
<a href="list" style="text-decoration: none; color: gray;">List</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="d-flex align-items-center">
<h1 class="fs-3 m-4">Master Kategori</h1>
</div>
<div class="wrapper-wrapper">
<div class="wrapper">
<form action="/addkategori">
<button type="submit" class="btn"><i class="fa-solid fa-circle-plus" style="font-size: x-large"></i> <span style="padding-left: 5px">Add Kategori</span></button>
</form>
</div>
</div>
<div class="container-fluid px-4">
<div class="row my-5">
<div class="col">
<table class="table bg-white rounded shadow-sm table-hover">
<thead>
<tr>
<th>#</th>
<th>Kode</th>
<th>Kategori</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
</tr>
<tr>
<th>2</th>
</tr>
<tr>
<th>3</th>
</tr>
<tr>
<th>4</th>
</tr>
<tr>
<th>5</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Page Content -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
</body>
</html>
和CSS
:root {
--main-bg-color: #EFEDED;
--main-text-color: #1570EF;
--second-text-color: #bbbec5;
--second-bg-color: #d1edf2;
}
.primary-text {
color: var(--main-text-color);
}
.second-text {
color: var(--second-text-color);
}
.secondary-bg {
background-color: var(--second-bg-color);
}
.rounded-full {
border-radius: 100%;
}
#wrapper {
overflow-x: hidden;
background-image: linear-gradient(to left,
#d4d4d4,
#dedede,
#ececec,
#f5f5f5);
}
#sidebar-wrapper {
min-height: 100vh;
margin-left: -15rem;
transition: margin 0.25s ease-out;
}
#sidebar-wrapper .sidebar-heading {
padding: 0.875rem 1.25rem;
font-size: 1.2rem;
}
#sidebar-wrapper .list-group {
width: 15rem;
}
#sidebar-wrapper .list-group-item:hover, #sidebar-wrapper .list-group-item:hover a {
color: #1570EF !important;
}
#page-content-wrapper {
min-width: 100vw;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: 0;
}
.wrapper .btn {
height: 50px;
background: #18C4FA;
margin-top: 30px;
cursor: pointer;
font-size: 18px;
color: white;
font-weight: 600;
}
.list-group-item {
border: none;
padding: 20px 30px;
}
.list-group-item.active {
background-color: transparent;
color: var(--main-text-color);
font-weight: bold;
border: none;
}
.active-button {
color: blue !important; /* Change the text color to blue */
}
@media (min-width: 768px) {
#sidebar-wrapper {
margin-left: 0;
}
#page-content-wrapper {
min-width: 0;
width: 100%;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: -15rem;
}
}
如果我能得到任何帮助，我将不胜感激，谢谢
1个回答
0
投票
投票
使用弹性盒
.btn-wrapper {
display: flex;
justify-content: flex-end;
}
:root {
--main-bg-color: #EFEDED;
--main-text-color: #1570EF;
--second-text-color: #bbbec5;
--second-bg-color: #d1edf2;
}
.primary-text {
color: var(--main-text-color);
}
.second-text {
color: var(--second-text-color);
}
.secondary-bg {
background-color: var(--second-bg-color);
}
.rounded-full {
border-radius: 100%;
}
#wrapper {
overflow-x: hidden;
background-image: linear-gradient(to left,
#d4d4d4,
#dedede,
#ececec,
#f5f5f5);
}
#sidebar-wrapper {
min-height: 100vh;
margin-left: -15rem;
transition: margin 0.25s ease-out;
}
#sidebar-wrapper .sidebar-heading {
padding: 0.875rem 1.25rem;
font-size: 1.2rem;
}
#sidebar-wrapper .list-group {
width: 15rem;
}
#sidebar-wrapper .list-group-item:hover, #sidebar-wrapper .list-group-item:hover a {
color: #1570EF !important;
}
#page-content-wrapper {
min-width: 100vw;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: 0;
}
.wrapper .btn {
height: 50px;
background: #18C4FA;
margin-top: 30px;
cursor: pointer;
font-size: 18px;
color: white;
font-weight: 600;
}
.list-group-item {
border: none;
padding: 20px 30px;
}
.list-group-item.active {
background-color: transparent;
color: var(--main-text-color);
font-weight: bold;
border: none;
}
.active-button {
color: blue !important; /* Change the text color to blue */
}
@media (min-width: 768px) {
#sidebar-wrapper {
margin-left: 0;
}
#page-content-wrapper {
min-width: 0;
width: 100%;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: -15rem;
}
}
.btn-wrapper {
display: flex;
justify-content: flex-end;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" type="text/css" href="{{ asset('css/styles.css') }}">
<title>Inventory | Master Kategori</title>
</head>
<body>
<div class="d-flex" id="wrapper">
<!-- Sidebar -->
<div class="bg-white" id="sidebar-wrapper">
<div class="sidebar-heading text-center py-4 primary-text fs-2 fw-bold text-uppercase border-bottom">
<i></i>INVENTORY SYSTEM
</div>
<div class="list-group list-group-flush my-2">
<a href="/"
class="list-group-item list-group-item-action bg-transparent second-text dashboard-button fw-bold"
style="text-decoration: none; color: gray;">
<i class="fas fa-tachometer-alt me-2"></i>Dashboard
</a>
<div class="list-group-item list-group-item-action bg-transparent second-text fw-bold">
<a href="mastercustomer" style="text-decoration: none; color: gray;">
<i class="fas fa-user-circle me-2"></i>Master
</a>
<ul class="list-group list-group-flush my-1" style="margin-left: 15px;">
<li class="list-group-item list-group-item-action bg-transparent second-text fw-bold"
style="padding: 9px">
<a href="mastercustomer" style="text-decoration: none; color: gray;">Master Customer</a>
</li>
<li class="list-group-item list-group-item-action bg-transparent second-text fw-bold"
style="padding: 9px">
<a href="mastersupplier" style="text-decoration: none; color: gray;">Master Supplier</a>
</li>
<li class="list-group-item list-group-item-action bg-transparent second-text fw-bold"
style="padding: 9px">
<a href="masterkategori" style="text-decoration: none; color: gray;">Master Kategori</a>
</li>
</ul>
</div>
<div class="list-group-item list-group-item-action bg-transparent second-text fw-bold">
<a href="stok
" style="text-decoration: none; color: gray;">
<i class="fas fa-box me-2"></i>Storage
</a>
<ul class="list-group list-group-flush my-1" style="margin-left: 15px;">
<li class="list-group-item list-group-item-action bg-transparent second-text fw-bold"
style="padding: 9px">
<a href="stok
"
style="text-decoration: none; color: gray;">Stok</a>
</li>
<li class="list-group-item list-group-item-action bg-transparent second-text fw-bold"
style="padding: 9px">
<a href="list" style="text-decoration: none; color: gray;">List</a>
</li>
<li class="list-group-item list-group-item-action bg-transparent second-text fw-bold"
style="padding: 9px">
<a href="list" style="text-decoration: none; color: gray;">List</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="d-flex align-items-center">
<h1 class="fs-3 m-4 mb-0">Master Kategori</h1>
</div>
<div class="container-fluid px-4">
<div class="btn-wrapper wrapper">
<form action="/addkategori">
<button type="submit" class="btn"><i class="fa-solid fa-circle-plus" style="font-size: x-large"></i> <span style="padding-left: 5px">Add Kategori</span></button>
</form>
</div>
<div class="row mb-5 mt-2">
<div class="col">
<table class="table bg-white rounded shadow-sm table-hover">
<thead>
<tr>
<th>#</th>
<th>Kode</th>
<th>Kategori</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
</tr>
<tr>
<th>2</th>
</tr>
<tr>
<th>3</th>
</tr>
<tr>
<th>4</th>
</tr>
<tr>
<th>5</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Page Content -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
</body>
</html>最新问题
- 当用户在深色和浅色主题之间切换时如何刷新我的小部件（Jetpack Glance）？
- 合并指标并检索指标值作为属性？
- 将第二个图放置在 ggplot2 中另一个图的 x 轴上
- 2024 年 5 月 10 日的 Teams 后端更改破坏了与 Teams 应用程序/机器人的屏幕截图共享 - URL 格式已更改且无法访问机器人
- Xcode 无法运行 macOS 应用程序：NSPOSIXErrorDomain 153
- 如何在 .net 8 c# 中创建允许可为空的获取属性的通用接口
- 在 Cosmos 数据库上使用 LINQ Skip Take 是否支持服务器端分页？
- jQuery UI 图标系统是否有一个“空”图标 - 一个没有图像的图标？
- 在 Python 3 中查找给定套接字和 inode 的进程 ID
- SQL Server 小于或等于 (<=) date not including last date
- 在下一个js中使用leaflet.js隐藏国家周围地图的其余部分
- python 覆盖上一行
- 如何组合输入和函数？
- 如何使用 Apache Sedona 将 parquet 格式数据框中的纬度和经度列转换为点类型（几何）？
- VueJS3 过滤数组 props
- 使用Linux C select系统调用来监控文件
- R 中的 n 维积分，极限为函数
- 如何从 Salesforce API 检索 ActionCadence 数据
- 如何在页面对象模型（Selenium+python）中抽象Web元素和动作？
- Angular Firebase：登录页面刷新时闪烁（AuthGuard + redirectUnauthorizedTo）
© www.soinside.com 2019 - 2024. All rights reserved.