如何使用 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>最新问题
- varnish 无法占用 ec2 机器上的 80 端口
- SwiftUI - onTapGesture 中绑定变量的比较（切换网格中行的选择）
- 有没有可以编译C++或C的库
- 我的 CS50 第 2 周的拼字游戏解决方案与符号作斗争。想不通为什么
- 我可以计算某个值的百分比并总结每个采样日期的此信息吗？
- 如何设置 Minecraft Villager 实体到某个位置的路径？即使用 Spigot API 让生物步行到特定地点
- 如何使用 Excel VBA 以编程方式导入 Excel VBA 模块？
- 使用重复的步骤定义运行不同的 Cucumber 套件
- GetElementsByID() 与 QuerySelector()
- 使用python过滤pdf
- Tilera 交叉编译 - 关于此错误的任何想法：未知的 asm 约束字母
- 片段未覆盖整个屏幕
- Redshift 的前向和后向 REGEX 替代方案 [已关闭]
- Firestore onDocumentWritten 触发器未在使用节点的 Cloud Functions 中进行文档写入时触发
- RPi4 上的 QNX 如何首次登录
- 问题中的一个heap-use-after-free错误--Design MyLinkList（LeetCode No.707）
- 如何在多列上创建FULLTEXT索引？
- Visual Composer 到 HTML
- 计算给定电阻邻接列表的总电阻
- 如何阻止空 iframe 在注入时触发加载事件？
© www.soinside.com 2019 - 2024. All rights reserved.