Question

我只是不知道如何将其变成水平列表，其中所有元素的宽度相等。

如果您需要更多信息，我真的不知道是否有任何信息丢失，所以只需评论/留言。所有不在“网格”<li>中的CSS都用于导航栏。

＆＃13;

 body{
    margin: 0;
    font-family: Verdana,sans-serif;
    }

    .intro{
    margin-left: 5%;
    margin-right: 5%;
    text-align: center;
    font-family: Verdana,sans-serif;
    }

    .active {
    background-color: red;
    }
    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    }

    li {
    float: right;
    }

    li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    }
    
    li a:hover, .dropdown:hover .dropbtn {
    background-color: red;
    }

    li.dropdown {
    display: inline-block;
    }

    .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }

    .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    }

    .dropdown-content a:hover {background-color: #f1f1f1}

    .dropdown:hover .dropdown-content {
    display: block;
    background-color: #D3D3D3
    }

 


    .button {
    background-color: white;
    color: black;
    border: 2px solid #555555;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    }

    .button:hover {
    background-color: #555555;
    color: white;
    }



    li.grid{
    float:left
    width: 25%
    }

＆＃13;

<ul>

    <li class="grid">
    <form action="http://google.com">
    <button class="button" type="submit"  />
    Computers, printers, mobile phones and the widgets that accompany them    account for the emission of about two per cent of the estimated total of emissions from human activity. And that is the same as the aviation industry&#8217;s contribution. 25 per cent of the emissions in question are generated by the manufacture of computers. The rest come from their use.
    <br>
    <br>
    </button>
    </form>
    </li>

    <li  class="grid">
    <form action="http://google.com" style="float: left">
    <button class="button" type="submit"  />
    Computers can be used to reduce emissions produced by other industries, up to 7.8 billion tonnes by 2020, or five times ICT&#8217;s own footprint. Computers can make industries more efficient and less wasteful of power and fuel.
    </button>
    </form>
    </li>

    <li   class="grid">
    <form action="http://google.com" style="float: left">
    <button class="button" type="submit"  />
    The use of computers has led to both positive and negative impacts on the climate change of our planet. Computers can help make some processes more efficient and save energy while the use and manufacture of computers contributes to the increased use of energy which leads to global warming. This website helps you to look at the positives and negatives of computing and climate change.</p>

    </button>
    </form>
    </li>

    <li   class="grid">
    <form action="http://google.com" style="float: left">
    <button class="button" type="submit"  />
    There are many ways in which computers can help cut down on our use of energy. Computers are steadily improving the amount of energy that they use with the smaller computers producing less CO2 than larger desktop computers.
    <br>
    <br>
    </button>
    </form>
    </li>
</ul>

＆＃13;

Answer 1

快速解决方案是使用弹性盒：

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  display: flex;
}

li {
 width: 25%
}

＆＃34; flex＆＃34;在父亲身上会自动影响孩子的显示效果。

您可以阅读更多相关信息here

如何使这个列表水平，宽度相等？

1 个答案: