Question

我一直在为一个练习网站的网格系统工作大约两个星期，我仍然无法弄明白。我一直在看youtube视频和左右阅读文章没有运气。这就是我到目前为止所提出的：

＆＃13;

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #2A2A2A;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}
li {
    float: right;
    text-color: white;
    border-left: 1px solid white;
    font-family: "Comic Sans MS";
}
li:hover {
  background-color: #1D1D1D;
}
li a {
  display: block;
  padding: 8px;
  color: white; 
  margin: 7px 5px 7px 5px;
}
li a:hover {
  background-color: #1D1D1D;
  color: white;
  text-decoration: none;
}
li:first-child {
  background-color: #00E006;
  border: none
}
li:first-child:hover {
  background-color: #05aa0a;
}
li:first-child a:hover {
  background-color: #05aa0a;
}
.fit {
  max-width: 100%;
  max-height: 100%;
}
.background {
  background-color: grey;
}
p {
  color: black;
  font-family: "Trebuchet MS";
  font-size: 16px;
  margin: 10px;
}
a:hover {
  text-decoration: none;
}
.bigger-text {
  font-size: 20px;
}
.profile-img-border {
  border: 1px solid black;
  border-radius: 50%;
}
.img-border {
  border: 3px solid black;
  border-radius: 100%;
  margin: 5px
}
div.img {
  margin: 0 auto;
  border: 1px solid #ccc;
  float: left;
  width: 280px;
  display: block;
}

div.img:hover {
  border: 1px solid #777;
}
div.img img {
  width: 100%;
  height: auto;
}
div.desc {
  padding: 15px;
  text-align: center;
  background-color: white;
}
.container {
  width: 1460px;
  margin-right: auto;
  margin-left:auto
}
five:first-child, four:first-child, three:first-child, two:first-child, one:first-child, six:first-child {
  margin-left: 0;
} 
.six {
  width: 100%;
  display: block;
}
.five {
  width: 80%;
  display: block;
  float: left;
  margin-left: 2%;
}
.four {
  width: 66%;
  display: block;
  float: left;
  margin-left: 2%;
}
.three {
  width: 49%;
  display: block;
  float: left;
  margin-left: 2%;
}
.two {
  width: 32%;
  display: block;
  float: left;
  margin-left: 2%;
}
.one {
  width: 15%;
  display: block;
  float: left;
  margin-left: 2%;
}
.row {
  width: 100%;
  clear: both;
  padding: 0px;
  margin: 0px;
}

＆＃13;

<!DOCTYPE html>
<html>
    <head>
    <Title>Personal Portfolio FCC</Title>
    <link rel="stylesheet" href="Hello%20World.css">
    </head>
<body class="background">
    <div class="container">
        <div class="row">
            <div class="top-bar-box align-middle-v" align="right">
                <ul>
                    <li style="float:left">
                        <a class="active">Home</a>
                    </li>
                    <li><a>About</a></li>
                    <li><a>Portfolio</a></li>
                    <li><a>Contact</a></li>
                </ul>
            </div>
        </div><!--Row 1 closer-->
        <div class="row"><!--Row 2 opener-->
            <div class="four">
                <p>"text text text"</p>
            </div>
            <div class="two">
                    <img src="#" alt="A picture of a verry handsome
                    fellow(me)" class="profile-img-border"></img>
            </div>
        </div><!--Row 2 closer-->
    </div>
</body>
</html>

＆＃13;

Answer 1

你可以从把它移到最后开始

five:first-child,
four:first-child,
three:first-child,
two:first-child,
one:first-child,
six:first-child {
  margin-left: 0;
}

并将其替换为

.five:first-child,
.four:first-child,
.three:first-child,
.two:first-child,
.one:first-child,
.six:first-child {
  margin-left: 0;
}

我的CSS网格没有使用我的HTML

1 个答案: