我有一张图片(平板电脑版本的输出):
我想在同一行内对齐 HTML 的第三个元素。
如上图所示，第三个框在 float 到下一行时并未在下一行中正确对齐
请让我知道我的代码中的错误。
* {
box-sizing: border-box;
}
h1 {
text-align: center;
font-family: monospace;
font-size: 45px;
margin-bottom: 45px;
}
p {
font-family: monospace;
border: 1px solid black;
width: 95%;
margin-left: auto;
margin-right: auto;
background-color: gray;
padding-top: 40px;
margin-top: 0px;
}
div.Chicken {
background-color: pink;
padding: 2px 37px 5px 37px;
position: absolute;
right: 2.5%;
border: 1px solid black;
top: 0px;
text-align: center;
width: 110px;
}
div.Beef {
background-color: orange;
padding: 2px 37px 5px 37px;
position: absolute;
right: 2.5%;
border: 1px solid black;
top: 0px;
text-align: center;
width: 110px;
}
div.Sushi {
background-color: red;
padding: 2px 37px 5px 37px;
text-align: center;
position: absolute;
right: 2.5%;
border: 1px solid black;
top: 0px;
width: 110px;
}
footer {
position: absolute;
background-color: gray;
width: 100%;
bottom: 0px;
text-align: center;
}
/*Desktop Version*/
@media(min-width: 992px) {
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
float: left;
position: relative;
}
.col-lg-1 {
width: 8.33%;
}
.col-lg-2 {
width: 16.66%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 33.33%;
}
.col-lg-5 {
width: 41.66%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-7 {
width: 58.33%;
}
.col-lg-8 {
width: 66.67%;
}
.col-lg-9 {
width: 75%;
}
.col-lg-10 {
width: 83.33%;
}
.col-lg-11 {
width: 91.66%;
}
.col-lg-12 {
width: 90%;
}
}
/*Tablet Version*/
@media(min-width: 768px) and (max-width: 991px) {
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12 {
float: left;
position: relative;
}
.col-md-1 {
width: 8.33%;
}
.col-md-2 {
width: 16.66%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width: 33.33%;
}
.col-md-5 {
width: 41.66%;
}
.col-md-6 {
width: 50%;
}
.col-md-7 {
width: 58.33%;
}
.col-md-8 {
width: 66.67%;
}
.col-md-9 {
width: 75%;
}
.col-md-10 {
width: 83.33%;
}
.col-md-11 {
width: 91.66%;
}
.col-md-12 {
width: 100%;
position: relative;
}
}
/*Mobile Version*/
@media(max-width: 767px) {
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12 {
float: left;
position: relative;
}
.col-sm-1 {
width: 8.33%;
}
.col-sm-2 {
width: 16.66%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-4 {
width: 33.33%;
}
.col-sm-5 {
width: 41.66%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-7 {
width: 58.33%;
}
.col-sm-8 {
width: 66.67%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-10 {
width: 83.33%;
}
.col-sm-11 {
width: 91.66%;
}
.col-sm-12 {
width: 100%;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Module 2 Assignment Coursera</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<h1>Our Menu</h1>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="Chicken">Chicken</div>
<p>
The font-family property specifies a list of fontss, from highest priority to lowest. Font selection does not simply stop at the first font in the list that is on the user's system. Rather, font selection is done one character at a time, so that if an
available font does not have a glyph for a needed character, the latter fonts are tried. (However, this doesn't work in Internet Explorer 6 or earlier.)
</p>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="Beef">Beef</div>
<p>
The font-family property specifies a list of fonts, from highest priority to lowest. Font selection does not simply stop at the first font in the list that is on the user's system. Rather, font selection is done one character at a time, so that if an
available font does not have a glyph for a needed character, the latter fonts are tried. (However, this doesn't work in Internet Explorer 6 or earlier.)
</p>
</div>
<div class="col-lg-4 col-md-12 col-sm-12">
<div class="Sushi">Sushi</div>
<p>
The font-family property specifies a list of fonts, from highest priority to lowest. Font selection does not simply stop at the first font in the list that is on the user's system. Rather, font selection is done one character at a time, so that if an
available font does not have a glyph for a needed character, the latter fonts are tried. (However, this doesn't work in Internet Explorer 6 or earlier.)
</p>
</div>
</body>
</html>我想要类似于下图的输出，其中所有元素都完美对齐。
平板电脑版本的预期图像:
提前感谢您的关心。:)
最佳答案
不使用宽度，而是使用 margin-left 和 margin-right。将 p 更改为:
p {
font-family: monospace;
border: 1px solid black;
background-color: gray;
padding-top: 40px;
margin-top: 0px;
margin-left: 10px;
margin-right: 10px;
}
然后你还必须更改 div.sushi、div.Beef 和 div.Chicken 中的 right 以将标签放在右上角:
div.Sushi, div.Chicken, div.Beef {
padding: 2px 37px 5px 37px;
text-align: center;
position: absolute;
right: 10px;
border: 1px solid black;
top: 0px;
width: 110px;
}
关于html - 在同一行内对齐 HTML 的所有元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45909522/