Question

我试图让菜单水平，然后按下标志名称时，菜单下方会显示标志。

在我的代码中对菜单进行更改时，我应该编辑哪些文件？

标志位置现在正确，但菜单错过了。可以做些什么来使菜单变为水平而不是列表？

JSFiddle ：http://jsfiddle.net/528k9z8m/

HTML ：

<body>
 <h1>Kmom03 sandboxen</h1>

<div id="content">
    <div id="menu">
        <ul>
            <li> <a href="#" id="draw-elfenbenskusten">Elfenbenskusten</a>
                <div id="flag-elfenbenskusten"></div>
            </li>
            <li> <a href="#" id="draw-sverige">Sverige</a>
                <div id="flag-sverige"></div>
            </li>
            <li> <a href="#" id="draw-maruritius">Maruritius</a>
                <div id="flag-maruritius"></div>
            </li>
            <li> <a href="#" id="draw-japan">Japan</a>
                <div id="flag-japan"></div>
            </li>
        </ul>
    </div>
</div>
<script type="text/javascript" src="js/main.js"></script>

CSS

body {
    }
    h1 {
    text-align: center;
    }
h3 {
    color: green;
    }
#menu {
    width: 500px;
    height: 50px;
    border: 1px solid black;
    }
#content {
    border: 1px solid black;
    background-color: #eee;
    padding: 4em;
    margin: 0 auto;
    height: 800px;
    width: 800px;
    border-radius: 30px;
}
.flagga1 {
    position: relative;
    width: 800px;
    height: 500px;
}
.sverige {
    background-color: #FECC00;
}
.sverige .box1 {
    position: absolute;
    width: 250px;
    height: 200px;
    background-color: #006AA7;
}
.sverige .box2 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 250px;
    height: 200px;
    background-color: #006AA7;
}
.sverige .box3 {
    position: absolute;
    top: 0;
    right: 0;
    width: 425px;
    height: 200px;
    background-color: #006AA7;
}
.sverige .box4 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 425px;
    height: 200px;
    background-color: #006AA7;
}
.flag {
    position: relative;
    width: 300px;
    height: 200px;
}
.elfenbenskusten {
    background-color: #fff;
}
.elfenbenskusten .part1 {
    width: 100px;
    height: 200px;
    background-color: #F77F00;
}
.elfenbenskusten .part2 {
    position: absolute;
    top: 0;
    left: 200px;
    width: 100px;
    height: 200px;
    background-color: #009e60;
}
.flagga2 {
    position: relative;
    width: 300px;
    height: 200px;
}
.maruritius {
    background-color: #EEE;
}
.maruritius .box1 {
    position: absolute;
    top: 0;
    width: 300px;
    height: 50px;
    background-color: #EA2839;
}
.maruritius .box2 {
    position: absolute;
    top: 50px;
    left: 0;
    width: 300px;
    height: 50px;
    background-color: #1A206D;
}
.maruritius .box3 {
    position: absolute;
    top: 100px;
    width: 300px;
    height: 50px;
    background-color: #FFD500;
}
.maruritius .box4 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 300px;
    height: 50px;
    background-color: #00A551;
}
.maruritius .box5 {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #006AA7;
}
.flagga3 {
    position: relative;
    height: 200px;
    width: 300px;
    border-style: solid;
    border-width: 1px;
    border-color: black;
}
.japan .box1 {
    background-color: #FFFFFF;
}
.japan .cirkel1 {
    border-radius: 50%;
    position: absolute;
    top: 40px;
    left: 90px;
    width: 125px;
    height: 125px;
    background-color: #BC002D;
}

JS ：

(function () {
'use strict';

//var myContent = document.getElementById('content');

//elfenbenskusten
var flagTarget = document.getElementById('flag-elfenbenskusten');
var flagLink = document.getElementById('draw-elfenbenskusten');

function drawFlagElfenbenskusten() {
    var flagElfenbenskusten = '<div class="flag elfenbenskusten"><div class="part1"></div><div class="part2"></div></div>'

    flagTarget.innerHTML = flagElfenbenskusten;
}
flagLink.addEventListener("click", function () {
    console.log("event for clicking link elfenbenskusten.")
    drawFlagElfenbenskusten();
});




//sverige
var flagTargetSverige = document.getElementById('flag-sverige');
var flagLinkSverige = document.getElementById('draw-sverige');

function drawFlagSverige() {
    var flagSverige = '<div class="flagga1 sverige"><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div></div>'

    flagTarget.innerHTML = flagSverige;
}
flagLinkSverige.addEventListener("click", function () {
    console.log("event for clicking link elfenbenskusten.")
    drawFlagSverige();
});

//maruritius
var flagTargetMaruritius = document.getElementById('flag-maruritius');
var flagLinkMaruritius = document.getElementById('draw-maruritius');

function drawFlagMaruritius() {
    var flagMaruritius = '<div class="flagga2 maruritius"><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div><div class="box5"></div></div>'

    flagTarget.innerHTML = flagMaruritius;
}
flagLinkMaruritius.addEventListener("click", function () {
    console.log("event for clicking link elfenbenskusten.")
    drawFlagMaruritius();
});


//japan
var flagTargetJapan = document.getElementById('flag-japan');
var flagLinkJapan = document.getElementById('draw-japan');

function drawFlagJapan() {
    var flagJapan = '<div class="flagga3 japan"><div class="box1"></div><div class="cirkel1"></div></div>'
    flagTarget.innerHTML = flagJapan;
}
flagLinkJapan.addEventListener("click", function () {
    console.log("event for clicking link elfenbenskusten.")
    drawFlagJapan();
});
})();

Answer 1

#menu li {
    list-style-type: none;
    float: left;
    margin-right: 10px;
    position: relative;
}

#menu ul li>div {
    position: absolute;
    top: 20px;
}

Fiddle

猜猜你想要实现的目标

Answer 2

你必须编辑css，试试这个：

ul {
    float: left;
    width: 100%;
}

a {
    float: left;
    width: 6em;
    text-decoration: none;
    padding: 0.2em 0.6em;

}


li {
    display: inline;
}

HTML或JS引起的菜单错误？

2 个答案: