Question

我开始学习css并且在向块添加颜色方面遇到了麻烦，这些块保持在同一行。如您所见，在第一行的My website中，颜色超出了每个块的边界。我想做的是让它看起来像example（3个绿色块）。任何人都可以帮我解决这个问题吗？

ps：抱歉，我的英语不太好：/

两者都是我的css和html代码：

＆＃13;

   

body
{
    font-family: inherit;
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
}



#menu1 {
    float: left;
    padding-left: 50px;
}

#menu2 {
    float: right;
    padding-right: 50px;
}


.nav {
    position: relative;
    top: -5px;
    padding: 9px 0px 50px 0px;
    background-color: aliceblue;
    margin-bottom: 0px;
}

.nav ul, li {
    display: inline-block
    border: 1px black solid;
    background-color: orange;
}
.nav ul,li,a {
    display: inline-block;

}

.titel {
    background-color: antiquewhite;
    position: relative;
    top: -9px;
    padding: 75px 0px 75px 0px;
}

.titel h1,h4 {
    text-align: center;
    color: skyblue;
    text-shadow: 2px 1px grey;
}

.hometext {
    margin: 0px 25px 0px 25px;
}

＆＃13;

<!DOCTYPE html>
<html>

    <head>     
        <title>My Website</title>
        <link rel ="stylesheet" type = "text/css" href = "style.css"/>
    </head>

    <body> 
    
<!--    <h1 class="blue">Titel 1</h1>
        <h1 id= "heading">Heading</h1>
        
        <p class = "blue">Welcome to my website, my name is Unknow and it's a pleasure for me to see you guys!!!!</p>-->
        
        <div class="nav">
        
            <ul id="menu1">
                <li><a href = "#">Home</a></li>
                <li><a href = "#">About</a></li>
                <li><a href = "#">Contact</a></li>
            </ul>

            <ul id="menu2">
                <li><a href = "#">Sign up</a></li>
                <li><a href = "#">Log in</a></li>
                <li><a href = "#">Help</a></li>
            </ul>
        
        </div>
        
        <div class="titel">
        
            <h1>---MY WEBSITE---</h1>
            <h4>Welcome to my first website</h4>
        </div>
        
        <div class="hometext">
                
                <h2>Homepage</h2>

        </div>
    
    </body>



</html>

＆＃13;

Answer 1

在开始使用CSS之前，您将不得不考虑标记。您的“框”列表看起来像某个“列表”......在这种情况下是导航链接。这就是我建议编写标记的方法。

<nav class='site-navigation'>
  <ul class='item-list'>
    <li class='item'>
      <a href='#'>Item name</a>
    </li>
    <li class='item'>
      <a href='#'>Item name</a>
    </li>
    <li class='item'>
      <a href='#'>Item name</a>
    </li>
  </ul>
</nav>

从那里开始......你会为它设计风格。

ul {
  /* reset the annoying defaults of lists */
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit; /* inherit from parent color */
}

.site-navigation .item-list .item {
  display: inline-block;
}

.site-navigation .item-list a {
  display: block; /* make sure these links (inline by default) are block */
  padding: 10px 20px;
  background: lightgreen;
  color: white;
}

https://jsfiddle.net/sheriffderek/cm5kbxx3/

“我如何为这些盒子着色”的问题应该告诉你是时候进行一些学习了。它只会增加约100倍的难度。找一个好的班级或导师。前端主持人或编码人员是快速升级的好方法。请确保下次发布一些代码 - 以及您迄今为止尝试过的内容。：）

如何在CSS中内联块添加颜色？

1 个答案: