Question

我是html和css的新手。我找到了W3.CSS模板并尝试修改它。我正在尝试制作导航工具栏，如下例所示： http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_nav_topnav_tab

但是我想在3个主要的容器中放置额外的“容器”。但是，永远不会显示其他<div>。这是一个例子：

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>

<div class="w3-topnav w3-red">
  <a href="#link1">London</a>
  <a href="#link2">Paris</a>
  <a href="#link3">Tokyo</a>
</div>

<div class="w3-tab">
<div id="link1" class="w3-container">
  <h2>London</h2>
  <p>London is the capital city of England.</p>
  <p>It is the most populous city in the United Kingdom,
  with a metropolitan area of over 13 million inhabitants.</p>  

<div class="w3-row">
<div class="w3-container w3-half">
    <h2>w3-half</h2> 
    <p>This is a paragraph</p>
  </div>
  <div class="w3-container w3-half">
    <h2>w3-half</h2> 
    <p>This is a paragraph</p>
  </div>
</div>
</div>
<div id="link2" class="w3-container">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p> 
  <p>The Paris area is one of the largest population centers in Europe,
  with more than 12 million inhabitants.</p>
</div>
<div id="link3" class="w3-container">
<h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
  <p>It is the center of the Greater Tokyo Area,
  and the most populous metropolitan area in the world.</p>
</div>
</div>

</body>
</html>

Answer 1

隐藏.w3-tab div显示，您需要更改它。此外，HTML结构不正确。使用以下内容：

<!DOCTYPE html>
<html>

<head>
    <title>W3.CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    <style>
        .w3-row, .w3-half {
            display:block !important;
        }
    </style>
</head>

<body>

    <div class="w3-topnav w3-red">
        <a href="#link1">London</a>
        <a href="#link2">Paris</a>
        <a href="#link3">Tokyo</a>
    </div>

    <div class="w3-tab">
        <div id="link1" class="w3-container">
            <h2>London</h2>
            <p>London is the capital city of England.</p>
            <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>

            <div class="w3-row">
                <div class="w3-container w3-half">
                    <h2>w3-half</h2>
                    <p>This is a paragraph</p>
                </div>
                <div class="w3-container w3-half">
                    <h2>w3-half</h2>
                    <p>This is a paragraph</p>
                </div>
            </div>
        </div>
        <div id="link2" class="w3-container">
            <h2>Paris</h2>
            <p>Paris is the capital of France.</p>
            <p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
        </div>
        <div id="link3" class="w3-container">
            <h2>Tokyo</h2>
            <p>Tokyo is the capital of Japan.</p>
            <p>It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
        </div>
    </div>

</body>

</html>

在w3-tab内部划分容器（导航为页面制表符）W3 CSS

1 个答案: