li 元素中较长的标签继续换行到下一行
问题描述 投票：0回答：0
所以我努力将项目保持在 LI 元素内联。 每个
当标签太长时，文本换行到下一行。 我尝试了不同的显示显示属性，但没有成功。
非常感谢您的帮助，非常感谢
是的，我正在努力让这段代码正常工作......请原谅
`
<!DOCTYPE html>
<html>
<head>
<title>Gateshead Maps</title>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<style>
input[type=checkbox], input[type=radio] { /* keeping layer checkboxes and patches inline */
vertical-align: middle;
position: relative;
bottom: .08em; /* this is a better value for different fonts! */
left: 5px;
right: 5px;
width:15px;
height: 15px;
}
svg {
vertical-align: middle;
position: relative;
bottom: .08em;
margin-left: 20px;
}
label {
padding-left: 12px;
font-weight: 600;
color: #383636;
flex-wrap: wrap;
display: inline;
position: center;
text-align: center;
margin-left:
}
.overflow {
padding-right: 10px;
}
.btn-toggle {
display: inline-flex;
align-items: center;
padding: .25rem .5rem;
font-weight: 600;
color: rgba(0, 0, 0, .65);
background-color: transparent;
}
.btn-toggle:hover,
.btn-toggle:focus {
color: rgba(0, 0, 0, .85);
background-color: #e3e4e4;
}
.btn-toggle::before {
width: 1.25em;
line-height: 0;
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
transition: transform .35s ease;
transform-origin: .5em 50%;
}
.btn-toggle[aria-expanded="true"] {
color: rgba(0, 0, 0, .85);
}
.btn-toggle[aria-expanded="true"]::before {
transform: rotate(90deg);
}
.btn-toggle-nav a {
display: inline-flex;
padding: .1875rem .5rem;
margin-top: .125rem;
margin-left: 1.25rem;
text-decoration: none;
}
.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus {
background-color: #cac9c9;
}
.btn-toggle-nav a {
width: 200px;
}
html, body{overflow:hidden;}
.fw-semibold { font-weight: 600; }
.lh-tight { line-height: 1.25; }
</style>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<!-- sidebar start -->
</head>
<body>
<i class="bi bi-layers" style="font-size: 1.5em; padding-right:10px"></i>
<span class="fs-5 fw-semibold">Layers</span>
<ul class="list-unstyled ps-0">
<li class="border-top my-0"></li>
<li class="mb-1">
<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#dashboard-collapse" aria-expanded="false">
Natural Environment
</button>
<div class="collapse show" id="dashboard-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><svg width="25" height="15"> <rect width="25" height="15" style="fill:rgb(245, 244, 244);stroke-width:5;stroke:rgb(25, 67, 207)" /></svg> <input class= "list_item" data-id="78" type="checkbox"><label> SSSI </label> </li>
<li><svg width="25" height="15"> <rect width="25" height="15" style="fill:rgb(245, 244, 244);stroke-width:5;stroke:rgb(2, 68, 32)" /></svg> <input class= "list_item" data-id="78" type="checkbox"><label> Local Nature Reserve </label> </li>
<li><svg width="25" height="15"> <rect width="25" height="15" style="fill:rgb(245, 244, 244);stroke-width:5;stroke:rgb(7, 155, 86)" /></svg> <input class= "list_item" data-id="78" type="checkbox"><label> Green Corridors </label> </li>
<li><svg width="25" height="15"> <rect width="25" height="15" style="fill:rgb(245, 244, 244);stroke-width:5;stroke:rgb(14, 146, 54)" /></svg> <input class= "list_item" data-id="78" type="checkbox"><label> Woodland </label> </li>
<li><svg width="25" height="15"> <rect width="25" height="15" style="fill:rgb(245, 244, 244);stroke-width:5;stroke:rgb(75, 143, 12)" /></svg> <input class= "list_item" data-id="78" type="checkbox"><label> Woodland CAST</label> </li>
<li><svg width="25" height="15"> <rect width="25" height="15" style="fill:rgb(245, 244, 244);stroke-width:5;stroke:rgb(10, 131, 64)" /></svg> <input class= "list_item" data-id="78" type="checkbox"><label> Wildlife Sites </label> </li>
<li><svg width="25" height="15"> <rect width="25" height="15" style="fill:rgb(245, 244, 244);stroke-width:5;stroke:rgb(6, 43, 7)" /></svg> <input class= "list_item" data-id="78" type="checkbox"><label> Woodland Creation Sites long for test </label> </li>
</ul>
</div>
</li>
<li class="border-top my-0"></li>
<li class="mb-1">
<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#orders-collapse" aria-expanded="false">
Orders
</button>
<div class="collapse show" id="orders-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><a href="#" class="link-dark rounded">New</a></li>
<li><a href="#" class="link-dark rounded">Processed</a></li>
<li><a href="#" class="link-dark rounded">Shipped</a></li>
<li><a href="#" class="link-dark rounded">Returned</a></li>
</ul>
</div>
</li>
<li class="border-top my-0"></li>
<li class="mb-1">
<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#account-collapse" aria-expanded="false">
Account
</button>
<div class="collapse show" id="account-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><a href="#" class="link-dark rounded">New...</a></li>
<li><a href="#" class="link-dark rounded">Profile</a></li>
<li><a href="#" class="link-dark rounded">Settings</a></li>
<li><a href="#" class="link-dark rounded">Sign out</a></li>
</ul>
</div>
</li>
<li class="border-top my-0"></li>
<li class="mb-1">
<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#histenv-collapse" aria-expanded="false">
Historic Environment
</button>
<div class="collapse show" id="histenv-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><svg width="20" height="13"> <rect width="20" height="13" style="fill:rgb(151, 16, 16);stroke-width:5;stroke:rgb(255,153,0)" /></svg> <input class= "list_item" data-id="78" type="checkbox"> Commercial and i like to be crazy indeed woith it test</label> </li>
<li><a href="#" class="link-dark rounded">Weekly</a></li>
<li><a href="#" class="link-dark rounded">Monthly</a></li>
<li><a href="#" class="link-dark rounded">Annually</a></li>
</ul>
</div>
</li>
<li class="border-top my-0"></li>
<li class="mb-1">
<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#openspace-collapse" aria-expanded="false">
Open Space
</button>
<div class="collapse show" id="openspace-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><svg width="20" height="13"> <rect width="20" height="13" style="fill:rgb(151, 16, 16);stroke-width:5;stroke:rgb(255,153,0)" /></svg> <input class= "list_item" data-id="78" type="checkbox"> Commercial and i like to be crazy indeed woith it test</label> </li>
<li><a href="#" class="link-dark rounded">Weekly</a></li>
<li><a href="#" class="link-dark rounded">Monthly</a></li>
<li><a href="#" class="link-dark rounded">Annually</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
`
尝试了许多不同的对齐属性，但收效甚微。
最新问题
- JQuery 可拖动/可调整大小的图像周围的文本环绕
- JavaScript 中对象具有属性深度检查
- 如何解决在 Ubuntu 上使用 npm 安装 Puppeteer 时出现的错误
- 基于区间的 numpy 数组？
- 如何使用 bash 命令在 C 中使用管道？
- 如何在同一页面上的 2 个 React 组件之间切换？
- 如何更改Linux中的默认shell？ [已关闭]
- 列表与隐式初始化字段的直接聚合初始化
- 我想制作一个等高线/曲面图，它显示单元格中的值，类似于 EFI 调整图
- 如何调试datagridview逻辑错误
- 在 Python 中修复带有未转义双引号的 JSON
- 获取实际参数名称
- Dockerized Nestjs 访问公共文件夹中的静态文件
- tkraise() 背景问题
- 使用pyrogram启动Telegram机器人时出现问题
- 为什么我在 GPC 上的虚拟机实例无法通过外部 IP 连接？
- 错误无效令牌、JWT 令牌、NodeJs、React Native、Axios
- Flutter - 如何检查应用程序是否有新版本？
- 您的git用户名与Gitlab账户名不一致
- 运行expo React Native ios应用程序时AppEntry捆绑问题
© www.soinside.com 2019 - 2024. All rights reserved.