CSS UL 和 LI 的设计问题
[英]CSS Designing Issue with UL and LI
问题描述
I'm having an issue regarding the CSS while applying to the UL and LI Tag in HTML UI designing.
我在 HTML UI 设计中申请 UL 和 LI 标签时遇到了关于 CSS 的问题。
My CSS Code我的 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>
Could you please anyone help me on this issue?你能请任何人帮助我解决这个问题吗？
Check the view source检查视图源
Updated Code Please have a look and let me know where I'm going wrong and let me know, I simply want all my result should be align and have in same line.更新的代码请看一下，让我知道我哪里出错了，让我知道，我只是希望我的所有结果都应该对齐并且在同一行。
<!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>
1 个解决方案
解决方案1
1 2020-09-12 18:35:26
One thing I have added here <ul class="row" style="width: 400px"> and it fixed the issue and width for not getting horizonatl scroll bar.我在此处添加的一件事<ul class="row" style="width: 400px">解决了没有获得 horizonatl 滚动条的问题和宽度。
解决方案2
0 2020-09-12 17:43:01
I'm having an issue regarding the CSS while applying to the UL and LI Tag in HTML UI designing.在 HTML UI 设计中应用 UL 和 LI 标签时，我遇到了有关 CSS 的问题。
My CSS Code我的 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>
Could you please anyone help me on this issue?你能请任何人帮助我解决这个问题吗？
Check the view source检查查看源
Updated Code Please have a look and let me know where I'm going wrong and let me know, I simply want all my result should be align and have in same line.更新代码请看一看，让我知道我哪里出错了，让我知道，我只是希望我的所有结果都应该对齐并在同一行中。
<!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.
相关问题
ul和li的CSS和jQuery问题 - CSS and jQuery issue with ul and li
ul li的CSS问题列表 - CSS issue with ul li a list
css ul li标签的对齐问题 - alignment issue with css ul li tags
CSS ul li格式 - CSS ul li formatting
将 css 应用于<ul>李</ul> - Apply css to <ul> li
单独的 ul li CSS - Separate ul li CSS
CSS浮动李而不是UL - Css floating li but not ul
CSS下拉列表UL LI A - CSS Dropdown UL LI A
ul li的jQuery问题 - jQuery issue with ul li
CSS Ul li导航问题：无法获得正确的结果 - CSS Ul li navigation issue: Can't get correct result
相关标签