[英]CSS Designing Issue with UL and LI
我在 HTML UI 設計中申請 UL 和 LI 標簽時遇到了關於 CSS 的問題。
我的 CSS 密碼
.jobs { list-style: none; }.jobs li { float: left; margin-left: 20px; padding: 10px; }.jobs::after { content: ""; display: grid; clear: both; }
<ul class="jobs"> <div th:each="indTypeProduct:${indTypeProducts}"> <li> <div class="card" id="wrapper" style="align-items: center;"> <a href="#"><p th:text="${indTypeProduct}" /></a> </div> </li> <br> </div> </ul>
你能請任何人幫助我解決這個問題嗎?
檢查視圖源
更新的代碼請看一下,讓我知道我哪里出錯了,讓我知道,我只是希望我的所有結果都應該對齊並且在同一行。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style type="text/css">
#wrapper {
margin-left: 50px;
margin-right: 20px;
padding: 12px;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: cursive;
}
.price {
color: grey;
font-size: 24px;
}
.card a {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
text-decoration: none;
}
.card a:hover {
opacity: 0.5;
}
.jobs {
list-style: none;
}
.jobs li {
float: left;
margin-left: 20px;
padding: 10px;
}
.jobs::after {
content: "";
display: grid;
clear: both;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/home">Cart Studio</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="/home">Home
<span class="sr-only">(current)</span>
</a></li>
<li class="nav-item"><a class="nav-link" href="/product">Product</a>
</li>
<li class="nav-item"><a class="nav-link" href="/contact">Contact</a>
</li>
<li class="nav-item"><a class="nav-link" href="/profile">Profile</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search"
placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<br>
<div>
<h4>
<p style="margin-left: 15px"> Hello test@gmail.com Greetings!!</p>
</h4>
</div>
<hr style="color: black;">
<div id="carouselExampleIndicators" class="carousel slide"
data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0"
class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="/uploads/images.jpg"
alt="First 1 slide" width="100" height="350">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/uploads/images.jpg"
width="100" height="350" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/uploads/images.jpg"
width="300" height="350" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators"
role="button" data-slide="prev"> <span
class="carousel-control-prev-icon" aria-hidden="true"></span> <span
class="sr-only">Previous</span>
</a> <a class="carousel-control-next" href="#carouselExampleIndicators"
role="button" data-slide="next"> <span
class="carousel-control-next-icon" aria-hidden="true"></span> <span
class="sr-only">Next</span>
</a>
</div>
<hr style="color: black;">
<ul class="jobs">
<div>
<li>
<div class="card" id="wrapper" style="align-items: center;">
<!-- <img th:src="@{/images/Mobile-Phones-Category.jpg}" alt="category" width="150" height="150"> -->
<a href="#"><p >retail</p></a>
</div>
</li>
<br>
</div>
<div>
<li>
<div class="card" id="wrapper" style="align-items: center;">
<!-- <img th:src="@{/images/Mobile-Phones-Category.jpg}" alt="category" width="150" height="150"> -->
<a href="#"><p >mobile</p></a>
</div>
</li>
<br>
</div>
</ul>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
</body>
</html>
我在此處添加的一件事<ul class="row" style="width: 400px">
解決了沒有獲得 horizonatl 滾動條的問題和寬度。
在 HTML UI 設計中應用 UL 和 LI 標簽時,我遇到了有關 CSS 的問題。
我的 CSS 代碼
.jobs { list-style: none; } .jobs li { float: left; margin-left: 20px; padding: 10px; } .jobs::after { content: ""; display: grid; clear: both; }
<ul class="jobs"> <div th:each="indTypeProduct :${indTypeProducts}"> <li> <div class="card" id="wrapper" style="align-items: center;"> <a href="#"><p th:text="${indTypeProduct}" /></a> </div> </li> <br> </div> </ul>
你能請任何人幫助我解決這個問題嗎?
檢查查看源
更新代碼請看一看,讓我知道我哪里出錯了,讓我知道,我只是希望我的所有結果都應該對齊並在同一行中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style type="text/css">
#wrapper {
margin-left: 50px;
margin-right: 20px;
padding: 12px;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: cursive;
}
.price {
color: grey;
font-size: 24px;
}
.card a {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
text-decoration: none;
}
.card a:hover {
opacity: 0.5;
}
.jobs {
list-style: none;
}
.jobs li {
float: left;
margin-left: 20px;
padding: 10px;
}
.jobs::after {
content: "";
display: grid;
clear: both;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/home">Cart Studio</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="/home">Home
<span class="sr-only">(current)</span>
</a></li>
<li class="nav-item"><a class="nav-link" href="/product">Product</a>
</li>
<li class="nav-item"><a class="nav-link" href="/contact">Contact</a>
</li>
<li class="nav-item"><a class="nav-link" href="/profile">Profile</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search"
placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<br>
<div>
<h4>
<p style="margin-left: 15px"> Hello test@gmail.com Greetings!!</p>
</h4>
</div>
<hr style="color: black;">
<div id="carouselExampleIndicators" class="carousel slide"
data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0"
class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="/uploads/images.jpg"
alt="First 1 slide" width="100" height="350">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/uploads/images.jpg"
width="100" height="350" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/uploads/images.jpg"
width="300" height="350" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators"
role="button" data-slide="prev"> <span
class="carousel-control-prev-icon" aria-hidden="true"></span> <span
class="sr-only">Previous</span>
</a> <a class="carousel-control-next" href="#carouselExampleIndicators"
role="button" data-slide="next"> <span
class="carousel-control-next-icon" aria-hidden="true"></span> <span
class="sr-only">Next</span>
</a>
</div>
<hr style="color: black;">
<ul class="jobs">
<div>
<li>
<div class="card" id="wrapper" style="align-items: center;">
<!-- <img th:src="@{/images/Mobile-Phones-Category.jpg}" alt="category" width="150" height="150"> -->
<a href="#"><p >retail</p></a>
</div>
</li>
<br>
</div>
<div>
<li>
<div class="card" id="wrapper" style="align-items: center;">
<!-- <img th:src="@{/images/Mobile-Phones-Category.jpg}" alt="category" width="150" height="150"> -->
<a href="#"><p >mobile</p></a>
</div>
</li>
<br>
</div>
</ul>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
</body>
</html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.