javascript - 如何在父跨度内放置无序列表,我的跳到下一行而不是向下流动
问题描述
我正在编写此代码,我想在食谱照片下包含 3 个按钮作为图标,例如时间图标,然后是使其位于图标右侧所需的时间。但是,该列表并未在卡片下方,而是移至新行。
HTML:
<!DOCTYPE html>
<html>
<head>
<title> </title>
<link rel="stylesheet" type="text/css" href="../stylesheets/recipes.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="../javascript/recipes.js"></script>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="btn">
<a href="../index.html">
<button id="logobtn">
<img src="../images/logo.png" class="logo" alt="Chef logo">
</button>
</a>
</div>
<nav>
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="restaurants.html">Restaurants</a></li>
<li><a href="#" class="current">Recipes</a></li>
<li><a href="requests.html">Requests</a></li>
</ul>
</nav>
</header>
<h1> Recipes </h1>
<div class="cards">
<a class="card" href="#">
<span class="card-header">
<img src="../images/benedict.jpg" class="cardpic">
<span class="card-title">
<h3>Eggs Benedict</h3>
</span>
</span>
<span class="cardsummary">
<p> Love it <br><br><br></p>
<ul>
<li><a href="#"><i class="fa fa-adn"></i></a> </li>
<li><a href="#"><i class="fa fa-android"></i></a> </li>
<li> <a href="#"><i class="fa fa-apple"></i></a> </li>
</ul>
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<img src="../images/eclair.jpg" class="cardpic">
<span class="card-title">
<h3>Chocolate Eclairs</h3>
</span>
</span>
<span class="card-summary">
Each card is created from an <a> tag so the whole card is linked.
<ul class="list-inline">
<li><a href="#"><i class="fa fa-adn"></i></a> </li>
<li><a href="#"><i class="fa fa-android"></i></a> </li>
<li> <a href="#"><i class="fa fa-apple"></i></a> </li>
</ul>
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<img src="../images/penne.jpg" class="cardpic">
<span class="card-title">
<h3>Penne alla Vodka</h3>
</span>
</span>
<span class="card-summary">
Each card is created from an <a> tag so the whole card is linked.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<img src="../images/rissoto.jpg" class="cardpic">
<span class="card-title">
<h3>Chocolate Eclairs</h3>
</span>
</span>
<span class="card-summary">
Each card is created from an <a> tag so the whole card is linked.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<img src="../images/rissoto.jpg" class="cardpic">
<span class="card-title">
<h3>Chocolate Eclairs</h3>
</span>
</span>
<span class="card-summary">
Each card is created from an <a> tag so the whole card is linked.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<img src="../images/rissoto.jpg" class="cardpic">
<span class="card-title">
<h3>Chocolate Eclairs</h3>
</span>
</span>
<span class="card-summary">
Each card is created from an <a> tag so the whole card is linked.
</span>
</a>
</div>
</body>
</html>
带有文本的卡片摘要在照片下方正确显示,但无论何时我将列表放在该 div 内,它都具有自己的属性和显示元素,而不是用父容器包装。
我想基本上在每张卡片下添加风格化图标作为摘要标题,然后我将在每张卡片中出现的所有 3 个图标下方显示文本,但图标列表只是继续移动到下一行,我真的想不通。
CSS:
body {
font-family: oswald;
font-weight: normal;
text-transform: uppercase;
text-align: center;
background-color: #fff4ea;
}
.background {
width: 100%;
height: 100%;
}
a {
color: black;
text-decoration: none;
font-weight: bold;
}
li a:hover {
color: #E49273;
}
span:hover {
color: #E49273;
}
header {
background: #fff4ea;
width: 100%;
height: 76px;
position: fixed;
top: 0;
left: 0;
padding-bottom: 30px;
border-bottom: 1px solid black;
z-index: 100;
}
.btn {
-webkit-transition all: 700ms ease;
transition all: 700ms ease;
cursor: pointer;
}
#logobtn {
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
float: left;
margin-top: 2px;
margin-left: 8px;
width: 100px;
height: 104px;
}
.logo{
width: 100px;
height: 104px;
}
nav {
float: right;
padding: 20px;
}
nav ul {
list-style: none;
overflow: auto;
position: relative;
}
nav li {
display: inline-block;
float: left;
padding: 10px;
font-size: 30px;
}
.current {
color: #A37A74;
}
h1 {
text-align: center;
position: relative;
top: 100px;
color: #7180AC;
font-size: 5em;
line-height: 1.15em;
}
h2 {
font-size: 2em;
color: black;
line-height: 1.15em;
}
p {
line-height: 1.45em;
margin-bottom: 20px;
}
.skew-forward {
-webkit-transform-origin: 10% 100%;
transform-origin: 10% 100%;
}
.skew-forward:hover {
-webkit-transform: skew(-10deg);
transform: skew(-10deg);
}
@media only screen and (max-width : 685px) {
header {
position: absolute;
}
nav ul, nav:active ul {
display: none;
position: absolute;
padding: 20px;
right: 0px;
top: 75px;
width: 50%;
}
nav li {
text-align: right;
width: 100%;
padding: 15px 0px;
margin: 0;
}
nav:hover ul {
display: block;
}
a:hover {
color: yellow;
}
}
@media only screen and (max-width: 790px) {
div.btn {
display: none;
}
}
@media only screen and (max-width: 1000px) {
h1 {
float: none;
display: none;
font-size: 3em;
}
.card {
margin-top: 15%;
}
}
@import "compass";
@import "breakpoint";
/*//Todo clean up some crappy code
*/
.cards {
display: flex;
flex-wrap: wrap;
margin-top: 10%;
box-sizing: border-box;
}
.card {
width: 25%;
position: relative;
margin-bottom: 5%;
margin-right: 2%;
margin-left: 3%;
color: #363636;
}
.cardpic {
position: inherit;
width: 100%;
height: auto;
max-width: 100%; // stop images from breaking out of their bounding boxes.
}
@media (max-width: 700px) {
width: 100%;
}
@include box-shadow(rgba(black, 0.19) 0 0 8px 0);
@include border-radius(4px);
@include breakpoint(700px, $no-query: true) {
/* //switch to 2 columns
*/ max-width: 320px;
margin-right: 20px;
margin-bottom: 20px;
&:nth-child(even) {
margin-right: 0;
}
}
/*@include breakpoint(980px, $no-query: true) {
//switch to 3 columns
&:nth-child(even) {
margin-right: 20px;
}
&:nth-child(3n) {
margin-right: 0;
}
}*/
span {
display: block;
}
.card-summary {
position: relative;
padding-top: 5%;
}
.cardsummary {
position: relative;
padding-top: 5%;
margin-top: 10%;
}
.card-header {
position: inherit;
overflow: hidden;
background-repeat: no-repeat;
background-position: center;
background-blend-mode: overlay;
border-radius(4px 4px 0 0);
max-width: 100%;
margin-top: 0%;
}
.card-title {
background: rgba(255,255,255,0.60);
padding: 3.5% 0 3.5% 0;
color: black;
font-weight: bold;
font-family: 'Roboto Condensed', sans-serif;
text-transform: uppercase;
position: absolute;
bottom: 0.5%;
width: 100%;
}
h3 {
font-size: 1.2em;
line-height: 1.2;
padding: 0 3.5%;
margin: 0;
}
.icon-zoom{
position: inherit;
}
ul {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
margin-bottom: 10px;
list-style-type: none;
}
/*---- Genral classes end -------*/
/*Change icons size here*/
.social-icons .fa {
font-size: 1.8em;
}
/*Change icons circle size and color here*/
.social-icons .fa {
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
color: #FFF;
color: rgba(255, 255, 255, 0.8);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.social-icons.icon-circle .fa{
border-radius: 50%;
}
.social-icons.icon-rounded .fa{
border-radius:5px;
}
.social-icons.icon-flat .fa{
border-radius: 0;
}
.social-icons .fa:hover, .social-icons .fa:active {
color: #FFF;
-webkit-box-shadow: 1px 1px 3px #333;
-moz-box-shadow: 1px 1px 3px #333;
box-shadow: 1px 1px 3px #333;
}
.social-icons.icon-zoom .fa:hover, .social-icons.icon-zoom .fa:active {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
JS:
$(document).ready(function(){
$("#logobtn").hover(function(){
$(this).toggleClass("skew-forward").toggleClass("blur");
});
$("a[href='#']").click(function(e) {
e.preventDefault();
});
})
解决方案
你有<a>
在<a>
. <a>
例如,如果您从所有<ul>
列表中删除一个:
<li><i class="fa fa-adn"></i></li>
该<ul>
元素将被浏览器正确解释。
要将<ul><li>
元素放在一行中,您可以使用例如"display: flex; justify-content: center"
on<ul>
或"float: left;"
on<ul><li>
元素。
要检查标记有效性,您还可以使用https://validator.w3.org
推荐阅读
- swift - 即使使用 self.view.window?.close() 窗口也不会关闭
- php - 通过 cURL PHP 将上传的文件发送到 API
- java - Struts 2 非 Action 类中的用户 ServletContext、HttpServletRequest 和 HttpServlet 响应
- google-maps - Vue Google Maps - 单击打开详细信息信息窗口时的信息窗口数组
- c++ - 无法将 std::function 移动到地图中
- powershell - Powershell cmdlet 不返回任何结果(有时,间歇性地)
- c# - 如何读取多个文件txt c#
- java - 通过在 Google 云上运行 Dataflow 作业,在 VM 实例上提供自定义标签和元数据
- c++ - 对于复合数据类型使用 glClearBufferData 是否可移植?
- oracle - 将行类型变量复制到另一个