html - 向左浮动和向右浮动不起作用 + 位于第一个 UL 元素下的子菜单？-6ren

html - 向左浮动和向右浮动不起作用 + 位于第一个 UL 元素下的子菜单？

转载作者：行者123 更新时间：2023-11-28 16:34:19

最近一直在学习 CSS 和 HTML，虽然我已经了解 float 、定位、边距、填充等内容，但出于某种原因，将这两个内容分开是行不通的...

还有我的子菜单有点不对，引用下图:

enter image description here

正如您在菜单下看到的，当我将鼠标悬停在团队上方时，子菜单显示在主页下方？不知道为什么，在我移动菜单栏之前这不是问题。

其次，如您所见，“你好”和“limpsum 等”文本不在“公司”下方，尽管我告诉它向左浮动，同样“博客图片”应该显示在联系人下方

基本上，COMPANY + 菜单都在一个容器 (nav) 中，而 hello/limsum + 博客图像，都在它们自己的容器下。两者都是 100% 宽度，hello/limsum float 到左侧，博客图像 float 到右侧，但它们的位置没有改变。

/*
	Business Website
	Author: Joel Male;
	Date Started: 20/06/2015;
	Date Finished: **;
*/

/* 
	////////////////////////////////////
	/////////// WEB STUFF //////////////
	////////////////////////////////////
*/

@font-face {
	font-family: BebasFont;
	src: url("bebas-font.ttf");
}

/* 
	////////////////////////////////////
	////// HANDLE DEFAULT MARKUPS //////
	////////////////////////////////////
*/

body {
	background-color: #666;
	color: #000305;
	font-size: 87.5%;
	font-family: Arial, 'Lucida Sans Unicode';
	line-height: 1.5;
	text-align: left;
	padding: 0;
	margin: 0;
}

a {
	text-decoration: none;
}

a:link, a:visited {

}

a:hover, a:active {

}

/* 
	////////////////////////////////////
	//// HANDLE HEADER/CONTAINER ///////
	////////////////////////////////////
*/

header {
	margin: 0 auto; /* Centers the page */
	width: 100%;
	clear: both; /* Nothing floats on the page */
}

.content {
	width: 70%;
	margin: 0 auto;
}

/* 
	////////////////////////////////////
	////// HANDLE MAINHEADER HERE //////
	////////////////////////////////////
*/

.mainheader {
	width: 100%;
	background-color: #022930;
	height: 300px;
}

.mainheader nav {
	padding-top: 2%;
	height: 40px;
}

.mainheader nav h1 {
	color: white;
	font-family: 'BebasFont';
	margin-top: -12px;
	float: left;
	padding-left: 15%;
	font-size: 40px;
}

.mainheader nav ul {
	padding-right: 15%;
	float: right;
	padding-left: 0; /* THIS REMOVES THE PADDING BETWEEN NAV AND HOME */
	list-style: none;
	margin: 0 auto;
}

.mainheader nav ul li {
	font-family: 'BebasFont';
	position: relative;
	display: inline;
}

.mainheader nav ul li ul {
	position: absolute;
	left: 0;
	top: 160%;
}

.mainheader nav a:link, .mainheader nav a:visited {
	color: #FFF;
	display: inline-block;
	padding: 10px 25px;
	height: 20px;
}

.mainheader nav a:hover, .mainheader nav a:active,
.mainheader nav .active a:link, .mainheader nav .active a:visited {
	background-color: #CF5C3F;
	text-shadow: none;
}

.mainheader nav ul li a {
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.mainheader .subheader {
	width: 100%;
	height: 200px;
}

.mainheader .subheader .left-content {
	padding-top: 3%;
	float: left;
	width: 30%;
}

.mainheader .subheader .left-content h1 {
	font-family: 'BebasFont';
	color: #FFF;
}

.mainheader .subheader .right-content{
	float: right;
	width: 30%;
	height: 200px;
}

/* 
	////////////////////////////////////
	//// HANDLE THE DROP DOWN MENUS ////
	////////////////////////////////////
*/

.mainheader nav ul li:hover ul {
	display: block; /* THIS SHOULD HANDLE THE SHOWING OF THE MENU */
	z-index: 10;
	padding-right: 0;
}


.mainheader nav ul ul {
	display: none;
	position: absolute;
	background-color: #666;
}

.mainheader nav ul ul li {
	display: block;
	padding-right: 0;
	min-width: 178px;
}

.mainheader nav ul ul li:hover {
	background-color: #CF5C3F;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

/* 
	////////////////////////////////////
	/////// HANDLE THE SLOGAN TEXT /////
	////////////////////////////////////
*/

.subheader {
	height: 130px;
}

.subheader .slogan-wrapper {
	float: left;
	width: 45%;
	padding-top: 4%;
	padding-left: 15%;
}

.subheader p b i {
	font-size: 30px;
	color: #CF5C3F;
}

.subheader .logo-wrapper {
	float: right;
	margin-top: -5px;
	padding-right: 15%;
}

.subheader img {
	width: 160px;
	height: 160px;
}

/* 
	////////////////////////////////////
	//// HANDLE THE FIRST SECTION //////
	////////////////////////////////////
*/

.firstsection {
	width: 100%;
	float: left;
	line-height: 25px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.firstsection .firstarticle {
	background-color: #FFF;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 2% 0%;
	margin-top: 2.8%;
	height: 220px;
	background-color: #CCC; /* THIS CHANGES THE BACKGROUND COLOR OF THE TOP CONTENT BACKGROUND */
}

.firstsection .firstarticle .image-wrapper {
	width: 32%;
	padding-left: 2%;
	float: left;
}

.firstsection .firstarticle h1 {
	margin-top: 0;
}

.firstsection .firstarticle .leftcontent {
	width: 26%;
	float: left;
}

.firstsection .firstarticle .leftcontent a {
	color: #07bac1;
}

.firstsection .firstarticle .leftcontent a:hover {
	text-decoration: underline;
}

.firstsection .firstarticle .rightcontent {
	padding-right: 2%;
	width: 26%;
	float: right;
}

.firstsection .firstarticle .rightcontent img {
	padding-right: 3%;
}

.firstsection .firstarticle .rightcontent i {
	font-style: italic;
	color: #999;
	font-size: 85%;
}

/* 
	////////////////////////////////////
	//////// HANDLE THE FOOTER /////////
	////////////////////////////////////
*/

.mainfooter {
	width: 100%;
	height: 140px;
	float: left;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin-top: 2%;
	background-color: #666;
	color: white;
}
.mainfooter a {
	color: #FFF;
}

.mainfooter .top-row {
	width: 100%;
	height: 100%;
	line-height: 5px;
}

.mainfooter .top-row h1 {
	padding-top: 1%;
	padding-bottom: 3%;
}

.mainfooter .top-row .leftrow {
	padding-left: 15%;
	padding-top: 5%;
	float: left;
}

.mainfooter .top-row .right-leftside {
	width: 300px;
	float: right;
}

.mainfooter .top-row .right-rightside {
	width: 300px;
	padding-right: 7%;
	float: right;
}

/* 
	////////////////////////////////////
	/// HANDLE PHONE/SMALLER SCREENS ///
	////////////////////////////////////
*/

@media only screen and (min-width: 150px) and (max-width: 600px)
{
	.body {
		width: 90%;
		font-size: 95%;
	}

	.mainheader img {
		width: 30%;
	}

	.mainheader nav {
		background: #666;
		height: 200px;
		line-height: 30px;
		margin-bottom: 0;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
	}

	.mainheader nav ul {
		list-style: none; 
		margin: 0 auto;
		padding-left: 0;
	}

	.mainheader nav li {
		width: 100%;
		margin-left: 0 auto;
	}

	.mainheader nav a:link, .mainheader nav a:visited {
		color: #FFF;
		display: block;
		height: 30px;
		padding: 5px 0;
		text-decoration: none;
	}

	.mainheader nav a:active,
	.mainheader nav .active a:link, .mainheader nav .active a:visited {
		background: #CF5C3F;
		color: #fff;
		text-shadow: none !important;
	}

	.mainheader nav li a {
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
			
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
	}

	.content {
		width: 100%;
		float: left;
		margin-top: 2%;
	}

	.top-content {
		background-color: #FFF;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		padding: 3% 5%;
		margin-top: 2%;
	}

	.bottom-content {
		background-color: #FFF;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		padding: 3% 5%;
		margin-top: 2px;
	}
}

<!DOCTYPE html>
<html lang="en">

<head>
		<title> Computer Company </title>
		<meta charset="utf-8" />

		<link rel="stylesheet" href="stylesheet.css" type="text/css" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body onLoad="slideA()">

	<header>
		<div class="mainheader">
			<nav>
				<h1>Company</h1>
				<ul>
					<li class="active"><a href="#">Home</a></li>
					<li><a href="#">Solutions & Services</a>
						<ul>
							<li><a href="#">Internet</a></li>
							<li><a href="#">Networking</a></li>
							<li><a href="#">Website</a></li>
							<li><a href="#">Home Computers</a></li>
							<li><a href="#">Servers</a></li>
						</ul>
					</li>
					<li><a href="#">Team</a>
						<ul>
							<li><a href="#">Founder</a></li>
							<li><a href="#">Graphics</a></li>
						</ul></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</nav>

			<div class="subheader">
				<div class="left-content">
					<h1>Hello!</h1>

					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
				</div>

				<div class="right-content">
					<img src="images/logo.jpg"/>
				</div>
			</div>

		</div>
	</header>

	<div class="subheader">
		<div class="slogan-wrapper">
			<p><b><i>An incredibly efficient I.T agency</i></b></p>
		</div>
		<div class="logo-wrapper">
			<img src="images/logo.jpg"/>
		</div>
	</div>


<div class="content">

	<div class="firstsection">
			<article class="firstarticle">
				<div class="image-wrapper">
					<img src="images/computer.jpeg"/>
				</div>
				<content class="leftcontent">
					<h1>Efficient, Affordable, Reliable</h1>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
					<p><a href="#">› Contact us</a></p>
				</content>
				<content class="rightcontent">
					<h1>Latest Feedback</h1>
					<p><img src="images/plus.gif"/>Solved my problem quickly and efficiently! <i>- Melissa, QLD</i></p>
					<p><img src="images/plus.gif"/>Called Joel to organize an appointment, he came over and fixed the problem the same day!<i>- Zac, QLD </i></p>
				</content>
			</article>
	</div>

</div>


<footer class="mainfooter">
	<div class="top-row">

		<p class="leftrow"> &copy; 2015 <a href="index.html">Computer Company</a></p>

		<div class="right-rightside">
			<h1>Contact</h1>
			<p>Joel Male @</p>
			<p>Mobile</p>
			<p>Email</p>
		</div>
		<div class="right-leftside">
			<h1>Opening Hours</h1>
			<p>Monday - Friday: 9am - 5pm</p>
			<p>Saturday: 10am - 4pm</p>
			<p>Sunday: Closed</p>
			<p>Public Holidays: Closed</p>
		</div>
	</div>
</footer>
</div>
</body>
</html>

会不会跟位置有关？我没有处理过这些，所以我不知道什么是绝对的，相对的，等等:(

谢谢你:(

编辑:我意识到 pastebin 代码和 html 已经过时，所以我更新了它们。还反射(reflect)了第一个答案建议的更改。

最佳答案

给出你的nav ul li相对位置:poisition:relative和你的 nav ul li ul应该有以下规则:

position:absolute;
left:0;
top:27px; /* so it will bedirectly underneath */

最后，要使悬停正常工作，请使用 nav ul li:hover>a悬停效果的选择器，而不是 nav ul li a:hover .

更改代码:

.mainheader nav ul li {
  font-family: 'BebasFont';
  display: inline;
  z-index: -10px;
  position:relative; /* added this */
}

.mainheader nav li:hover>a, /*changed this from .mainheader nav li a:hover */
.mainheader nav a:active,
.mainheader nav .active a:link,
.mainheader nav .active a:visited {
  background-color: #CF5C3F;
  text-shadow: none;
}

.mainheader nav ul li:hover ul {
  display: block;
  /* THIS SHOULD HANDLE THE SHOWING OF THE MENU */
  z-index: 10;
  padding-right: 0;
  /*NEW STUFF*/
  position:absolute;
  top:27px;
  left:0;
  /*END OF NEW STUFF*/
}

工作演示:

/*
        Business Website
        Author: Joel Male;
        Date Started: 20/06/2015;
        Date Finished: **;
*/

/*
        ////////////////////////////////////
        /////////// WEB STUFF //////////////
        ////////////////////////////////////
*/

@font-face {
  font-family: BebasFont;
  src: url("bebas-font.ttf");
}
/*
        ////////////////////////////////////
        ////// HANDLE DEFAULT MARKUPS //////
        ////////////////////////////////////
*/

body {
  background-color: #666;
  color: #000305;
  font-size: 87.5%;
  font-family: Arial, 'Lucida Sans Unicode';
  line-height: 1.5;
  text-align: left;
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
}
a:link,
a:visited {} a:hover,
a:active {}
/*
        ////////////////////////////////////
        //// HANDLE HEADER/CONTAINER ///////
        ////////////////////////////////////
*/

header {
  margin: 0 auto;
  /* Centers the page */
  width: 100%;
  clear: both;
  /* Nothing floats on the page */
}
.content {
  width: 70%;
  margin: 0 auto;
}
/*
        ////////////////////////////////////
        ////// HANDLE MAINHEADER HERE //////
        ////////////////////////////////////
*/

.mainheader {
  width: 100%;
}
.mainheader nav {
  padding-right: 15%;
  background-color: #022930;
  height: 300px;
  padding-top: 2%;
}
.mainheader nav h1 {
  color: white;
  font-family: 'BebasFont';
  margin-top: -12px;
  float: left;
  padding-left: 15%;
  font-size: 40px;
}
.mainheader nav ul {
  float: right;
  padding-left: 0;
  /* THIS REMOVES THE PADDING BETWEEN NAV AND HOME */
  list-style: none;
  margin: 0 auto;
}
.mainheader nav ul li {
  font-family: 'BebasFont';
  display: inline;
  z-index: -10px;
  position:relative; /* added this */
}
.mainheader nav a:link,
.mainheader nav a:visited {
  color: #FFF;
  display: inline-block;
  padding: 10px 25px;
  height: 20px;
}
.mainheader nav li:hover>a, /*changed this from .mainheader nav li a:hover */
.mainheader nav a:active,
.mainheader nav .active a:link,
.mainheader nav .active a:visited {
  background-color: #CF5C3F;
  text-shadow: none;
}
.mainheader nav ul li a {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
/*
        ////////////////////////////////////
        //// HANDLE THE DROP DOWN MENUS ////
        ////////////////////////////////////
*/

.mainheader nav ul li:hover ul {
  display: block;
  /* THIS SHOULD HANDLE THE SHOWING OF THE MENU */
  z-index: 10;
  padding-right: 0;
  /*NEW STUFF*/
  position:absolute;
  top:27px;
  left:0;
  /*END OF NEW STUFF*/
}
.mainheader nav ul ul {
  display: none;
  position: absolute;
  background-color: #666;
}
.mainheader nav ul ul li {
  display: block;
  padding-right: 0;
  min-width: 178px;
}
.mainheader nav ul ul li:hover {
  background-color: #CF5C3F;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
/*
        ////////////////////////////////////
        // HANDLE THE CONTACT RIGHT SIDE ///
        ////////////////////////////////////
*/

.mainheader p {
  float: right;
  margin-top: 10px;
  padding-right: 18%;
  color: #FFF;
}
.mainheader p b {
  text-decoration: underline;
}
/*
        ////////////////////////////////////
        /////// HANDLE THE SLOGAN TEXT /////
        ////////////////////////////////////
*/

.subheader {
  height: 130px;
}
.subheader .slogan-wrapper {
  float: left;
  width: 45%;
  padding-top: 4%;
  padding-left: 15%;
}
.subheader p b i {
  font-size: 30px;
  color: #CF5C3F;
}
.subheader .logo-wrapper {
  float: right;
  margin-top: -5px;
  padding-right: 15%;
}
.subheader img {
  width: 160px;
  height: 160px;
}
/*
        ////////////////////////////////////
        //// HANDLE THE FIRST SECTION //////
        ////////////////////////////////////
*/

.firstsection {
  width: 100%;
  float: left;
  line-height: 25px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
.firstsection .firstarticle {
  background-color: #FFF;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  padding: 2% 0%;
  margin-top: 2.8%;
  height: 220px;
  background-color: #CCC;
  /* THIS CHANGES THE BACKGROUND COLOR OF THE TOP CONTENT BACKGROUND */
}
.firstsection .firstarticle .image-wrapper {
  width: 32%;
  padding-left: 2%;
  float: left;
}
.firstsection .firstarticle h1 {
  margin-top: 0;
}
.firstsection .firstarticle .leftcontent {
  width: 26%;
  float: left;
}
.firstsection .firstarticle .leftcontent a {
  color: #07bac1;
}
.firstsection .firstarticle .leftcontent a:hover {
  text-decoration: underline;
}
.firstsection .firstarticle .rightcontent {
  padding-right: 2%;
  width: 26%;
  float: right;
}
.firstsection .firstarticle .rightcontent img {
  padding-right: 3%;
}
.firstsection .firstarticle .rightcontent i {
  font-style: italic;
  color: #999;
  font-size: 85%;
}
/*
        ////////////////////////////////////
        //////// HANDLE THE FOOTER /////////
        ////////////////////////////////////
*/

.mainfooter {
  width: 100%;
  height: 140px;
  float: left;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  margin-top: 2%;
  background-color: #666;
  color: white;
}
.mainfooter a {
  color: #FFF;
}
.mainfooter .top-row {
  width: 100%;
  height: 100%;
  line-height: 5px;
}
.mainfooter .top-row h1 {
  padding-top: 1%;
  padding-bottom: 3%;
}
.mainfooter .top-row .leftrow {
  padding-left: 15%;
  padding-top: 5%;
  float: left;
}
.mainfooter .top-row .right-leftside {
  width: 300px;
  float: right;
}
.mainfooter .top-row .right-rightside {
  width: 300px;
  padding-right: 7%;
  float: right;
}
/*
        ////////////////////////////////////
        /// HANDLE PHONE/SMALLER SCREENS ///
        ////////////////////////////////////
*/

@media only screen and (min-width: 150px) and (max-width: 600px) {
  .body {
    width: 90%;
    font-size: 95%;
  }
  .mainheader img {
    width: 30%;
  }
  .mainheader nav {
    background: #666;
    height: 200px;
    line-height: 30px;
    margin-bottom: 0;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
  }
  .mainheader nav ul {
    list-style: none;
    margin: 0 auto;
    padding-left: 0;
  }
  .mainheader nav li {
    width: 100%;
    margin-left: 0 auto;
  }
  .mainheader nav a:link,
  .mainheader nav a:visited {
    color: #FFF;
    display: block;
    height: 30px;
    padding: 5px 0;
    text-decoration: none;
  }
  .mainheader nav a:active,
  .mainheader nav .active a:link,
  .mainheader nav .active a:visited {
    background: #CF5C3F;
    color: #fff;
    text-shadow: none !important;
  }
  .mainheader nav li a {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
  }
  .content {
    width: 100%;
    float: left;
    margin-top: 2%;
  }
  .top-content {
    background-color: #FFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 3% 5%;
    margin-top: 2%;
  }
  .bottom-content {
    background-color: #FFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 3% 5%;
    margin-top: 2px;
  }
}

.mainheader nav ul li:hover ul {
  display: block;
  /* THIS SHOULD HANDLE THE SHOWING OF THE MENU */
  z-index: 10;
  padding-right: 0;
  /*NEW STUFF*/
  position:absolute;
  top:27px;
  left:0;
  /*END OF NEW STUFF*/
}

<header>
  <div class="mainheader">
    <nav>
      <h1>Company</h1>
      <ul>
        <li class="active"><a href="#">Home</a>
        </li>
        <li><a href="#">Solutions & Services</a>
          <ul>
            <li><a href="#">Internet</a>
            </li>
            <li><a href="#">Networking</a>
            </li>
            <li><a href="#">Website</a>
            </li>
            <li><a href="#">Home Computers</a>
            </li>
            <li><a href="#">Servers</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Team</a>
          <ul>
            <li><a href="#">Founder</a>
            </li>
            <li><a href="#">Graphics</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Contact</a>
        </li>
      </ul>
      <!--<p class="mainheader-phone"> Call Joel at <b>0468-575-424</b> </p>-->
    </nav>
  </div>
</header>

<div class="subheader">
  <div class="slogan-wrapper">
    <p><b><i>An incredibly efficient I.T agency</i></b>
    </p>
  </div>
  <div class="logo-wrapper">
    <img src="images/logo.jpg" />
  </div>
</div>


<div class="content">

  <div class="firstsection">
    <article class="firstarticle">
      <div class="image-wrapper">
        <img src="images/computer.jpeg" />
      </div>
      <content class="leftcontent">
        <h1>Efficient, Affordable, Reliable</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Ut enim ad minim veniam, quis nostrud exercitation
          ullamco laboris nisi. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
        <p><a href="#">› Contact us</a>
        </p>
      </content>
      <content class="rightcontent">
        <h1>Latest Feedback</h1>
        <p>
          <img src="images/plus.gif" />Solved my problem quickly and efficiently! <i>- Melissa, QLD</i>
        </p>
        <p>
          <img src="images/plus.gif" />Called Joel to organize an appointment, he came over and fixed the problem the same day!<i>- Zac, QLD </i>
        </p>
      </content>
    </article>
  </div>

</div>


<footer class="mainfooter">
  <div class="top-row">

    <p class="leftrow">&copy; 2015 <a href="index.html">Computer Company</a>
    </p>

    <div class="right-rightside">
      <h1>Contact</h1>
      <p>Joel Male @</p>
      <p>Mobile</p>
      <p>Email</p>
    </div>
    <div class="right-leftside">
      <h1>Opening Hours</h1>
      <p>Monday - Friday: 9am - 5pm</p>
      <p>Saturday: 10am - 4pm</p>
      <p>Sunday: Closed</p>
      <p>Public Holidays: Closed</p>
    </div>
  </div>
</footer>
</div>

关于html - 向左浮动和向右浮动不起作用 + 位于第一个 UL 元素下的子菜单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30999586/

文章推荐： javascript - 如何在 JQuery 中返回某些内容？

文章推荐： python - Pony ORM 是否完全支持计算/派生字段？

jQuery 子>父>子
我有这个 html 代码: HELLO WORLD! X V HELLO WORLD! X V 我想按 X(类关闭)将父 div 的高度更改为 20px 并显示 V(类打开)，但在每个 d
database-design - 在数据库中存储(子)日志和(子)分类帐以用于会计应用程序
在会计应用程序的许多不同实现中，有两种主要的数据库设计方法来保存日志和分类帐数据。只保留 Journal 信息，然后 Ledger 只是 Journal 的一个 View (因为 journal 总
子里面的 Perl 子
我想在另一个子里面有一个子， sub a { sub b { } } 我想为每次调用 sub b 创建一个新的 sub a 实例。有没有办法在 Perl 中做到这一点？当我运行上面的
excel - 查找重复项和重命名主/子
我有一些代码正在查找重复项并突出显示单元格: Private Sub cmdDups_Click() Dim Rng As Range Dim cel As Range Set Rng = ThisW
delphi - 子表中具有替代链接字段的主/子
可能有一个简单的解决方案，但我很难过。我有一个包含一个 ID 字段的主表。在两个可能的字段中有一个具有该 ID 的子表。想象一个由选手 A 和选手 B 组成的 double 队。Master 表将有
javascript - 将相关元素嵌套在一起父/子
假设我有一个包含对象的数组: [ { "id": "5a97e047f826a0111b754beb", "name": "Hogwarts", "parentId": "
mysql - 同时批量插入父/子
我正在尝试对 MySQL 数据库表执行一对父/子模型的批量插入，但似乎无法使用标准的 ActiveRecord 功能来完成。所以，我尝试了 activerecord-import gem，但它也不支持
c# - 子/父事件引发
我有一个带有多个子类的父抽象类。最终，我希望通过 GUI 中的进度条显示子类中完成的进度。我目前所做的，我意识到这是行不通的，是在父类中声明为每个子类将覆盖的虚拟方法的事件方法定义。所以像: pub
Javascript(子)对象通过键数组访问
是否可以通过键数组在对象中设置变量？例如我有这个对象: var obj = {'outer': {'inner': 'value'} }; 并希望设置由键数组选择的值: var keys = ['ou
mysql - 具有多个级别的多重关系父/子
我有一个名为 companies 的 MySQL 表，如下所示: +---------+-----------+-----------+ | id_comp | comp_name | id_pare
linux - 子。命令在终端上不起作用
我正在尝试使用 sublime text 在 sublime text 上的 ionic 上打开我的第一个应用程序。它给了我一个“找不到命令”的错误。如何修复？我试过这些命令: sudo rm -r
Python 共享属性父/子
不好意思问，但我正在使用 webapp2，我正在设计一个解决方案，以便更容易定义路由 based on this google webapp2 route function .但这完全取决于能够在子级
c++ - 获取用数字字符串表示的树中的所有直接父/子
我有代表树的数字字符串(我不知道是否有官方名称): 012323301212 上面的例子代表了 2 棵树。根用 0 表示。根的直接子代为“1”，“1”的直接子代为“2”，依此类推。我需要将它们分组到由
Android ==> 子 Activity ？
是否可以在当前 Activity 之上添加 Activity 。例如，假设我单击一个按钮，然后它将第二个 Activity 添加到当前 Activity 。而第二个 Activity 只覆盖了我当前
REST 子/子资源单个实体
我很难思考如何为子资源建模。以作者的书籍为例。你可以有 N 本书，每本书只有一位作者。 /books GET /books POST /books/id PUT /books/id DELETE 到
Python:(子)字符串等价与列表快速成员资格测试
有人可以向我解释以下内容(python 2.7) 来自已解析文件的两个字符串数字: '410.9''410.9 '(注意尾随空格) A_LIST = ['410.9 '] '410.9' in '41
.net - 是否存在指定的(子)索引分隔符？
背景在 PowerShell 中构建 hash table 是很常见的通过特定属性快速访问对象，例如以 LastName 为基础建立索引: $List = ConvertFrom-Csv @' I
polymer - 子 Web 组件的调用方法
我真的很难弄清楚如何调用嵌套 Polymer Web 组件的函数。这是标记: rise-distribution组件有 canPlay我想从 rise-playlist
graphviz - 具有大(子)集群的图形的隐点错误消息
我写了一个小工具转储(以 dot 格式)一个项目的依赖关系图，其中所有位于同一目录中的文件都聚集在一个集群中。当我尝试生成包含相应图形的 pdf 时，dot开始哭: 命令 dot -Tpdf trim
perl - 如何通过指定其解析树来创建 perl 子？
给定一个 CODE ref，是否可以: 访问该 CODE ref 的解析树通过指定 CODE ref 的解析树来创建一个新的 CODE ref，该解析树可以包含在 1 中返回的解析树的元素通常我们

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 向左浮动和向右浮动不起作用 + 位于第一个 UL 元素下的子菜单？