目前我的导航栏出现在页面的左侧而不是页面的顶部。我已经包含了我的网站外观的代码笔以及我希望如何显示导航栏的图片。我希望导航栏出现在页面顶部，左侧是调查，右侧是结果。如果有人可以提供帮助，我们将不胜感激!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Survey</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<!-- <link rel="stylesheet" href="flexbox.css"> -->
</head>
<body>
<main class="content" role="main">
<header class="main-header">
<h1 class="name"><a href="#">KeyPath Survey</a></h1>
<ul class="main-nav">
<li><a href="#">My Profile</a></li>
<li><a href="#">Scores</a></li>
<li><a href="#">Favorites</a></li>
</ul>
</header><!--/.main-header-->
<div class="grid-100">
<form action="">
<div class="contained">
<div class="grid-100">
<!-- <h3>KeyPath Survey</h3> -->
</br>
<fieldset>
<div>
<label for="">1. Mixtape put a bird on it sartorial?</label>
</div>
<div class="grid-75 grid-parent">
<div class="form-item">
<select name="" id="">
<option disabled selected>Select One</option>
<option value="v">Verbal Communication</option>
<option value="n">Nonverbal Communication</option>
<option value="w">Written Communication</option>
</select>
</div>
</div>
<div>
<label for="">2. Williamsburg unicorn tumeric?</label>
</div>
<div class="grid-75 grid-parent">
<div class="form-item">
<select name="" id="">
<option disabled selected>Select One</option>
<option value="v">Verbal Communication</option>
<option value="n">Nonverbal Communication</option>
<option value="w">Written Communication</option>
</select>
</div>
</div>
<div>
<label for="">3. Keytar raclette green juice?</label>
</div>
<div class="grid-75 grid-parent">
<div class="form-item">
<select name="" id="">
<option disabled selected>Select One</option>
<option value="v">Verbal Communication</option>
<option value="n">Nonverbal Communication</option>
<option value="w">Written Communication</option>
</select>
</div>
</div>
<div>
<label for="">4. Edison bulb iceland af pug?</label>
</div>
<div class="grid-75 grid-parent">
<div class="form-item">
<select name="" id="">
<option disabled selected>Select One</option>
<option value="v">Verbal Communication</option>
<option value="n">Nonverbal Communication</option>
<option value="w">Written Communication</option>
</select>
</div>
</div>
<div>
<label for="">5. Sriracha mumblecore typewriter?</label>
</div>
<div class="grid-75 grid-parent">
<div class="form-item">
<select name="" id="">
<option disabled selected>Select One</option>
<option value="v">Verbal Communication</option>
<option value="n">Nonverbal Communication</option>
<option value="w">Written Communication</option>
</select>
</div>
</div>
<div>
<label for="">6. Tote bag shabby chic cred?</label>
</div>
<div class="grid-75 grid-parent">
<div class="form-item">
<select name="" id="">
<option disabled selected>Select One</option>
<option value="v">Verbal Communication</option>
<option value="n">Nonverbal Communication</option>
<option value="w">Written Communication</option>
</select>
</div>
</div>
<div>
<label for="">7. Thundercats organic bushwick plaid?</label>
</div>
<div class="grid-75 grid-parent">
<div class="form-item">
<select name="" id="">
<option disabled selected>Select One</option>
<option value="v">Verbal Communication</option>
<option value="n">Nonverbal Communication</option>
<option value="w">Written Communication</option>
</select>
</div>
</div>
<div>
<label for="">8. Vexillologist drinking vinegar food truck?</label>
</div>
<div class="grid-75 grid-parent">
<div class="form-item">
<select name="" id="">
<option disabled selected>Select One</option>
<option value="v">Verbal Communication</option>
<option value="n">Nonverbal Communication</option>
<option value="w">Written Communication</option>
</select>
</div>
</div>
<div>
<label for="">9. Distillery tbh gastropub DIY austin?</label>
</div>
<div class="grid-75 grid-parent">
<div class="form-item">
<select name="" id="">
<option disabled selected>Select One</option>
<option value="v">Verbal Communication</option>
<option value="n">Nonverbal Communication</option>
<option value="w">Written Communication</option>
</select>
</div>
</div>
<div>
<label for="">10. Godard thundercats raw denim four dollar?</label>
</div>
<div class="grid-75 grid-parent">
<div class="form-item">
<select name="" id="">
<option disabled selected>Select One</option>
<option value="v">Verbal Communication</option>
<option value="n">Nonverbal Communication</option>
<option value="w">Written Communication</option>
</select>
</div>
</div>
</fieldset>
</div>
</div>
<div class="form-footer">
<button class="button primary submit">Submit Survey</button>
</div>
</form>
</div>
<div class="graph">
<canvas id="myChart"></canvas>
</div>
</main>
<!-- <div>
Score: Verbal <span id="verbal">0</span>
Non-Verbal <span id="non-verbal">0</span>
Written <span id="written">0</span>
</div> -->
</body>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://cdn.rawgit.com/emn178/Chart.PieceLabel.js/master/build/Chart.PieceLabel.min.js"></script>
<script src="main.js"></script>
</html>
.wrapper {
width:90%;
margin-right: auto;
margin-left: auto;
}
.content {
display: flex;
}
.grid-100, .graph {
flex: 1 0 0;
margin-left: 20px;
}
.grid-75 {
padding-top: 15px;
padding-bottom: 15px;
}
.button {
background-color: #5fcf80;
border: solid 2px #5fcf80;
font-size: 14px;
height: 40px;
line-height: 36px;
padding: 0 15px;
margin-top: 20px;
color: #fff;
margin-left: 40px;
}
fieldset {
margin-bottom: 20px;
}
.form-footer .button {
margin: 0 10px 10px 0;
}
div.chosen-container a.chosen-single {
background: #e8ebed;
border: 2px solid #e8ebed;
outline: none;
font-size: 14px;
padding-right: 40px;
height: 44px;
color: #4b5658;
box-shadow: none;
border-radius: 5px;
transition: background 0.25s ease;
}
.graph {
margin-top: 30px;
}
/*Reset CSS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* =================================
Base Layout Styles
==================================== */
/* ---- Navigation ---- */
.name {
font-size: 1.35em;
margin: 0;
}
.main-nav {
margin-top: 5px;
}
.name a,
.main-nav a {
text-align: center;
display: block;
padding: 10px 15px;
}
.main-nav a {
font-size: .95em;
color: #3acec2;
text-transform: uppercase;
}
.main-nav a:hover {
color: #093a58;
}
/* ---- Layout Containers ---- */
.main-header {
padding-top: .5em;
padding-bottom: .5em;
}
.banner,
.main-footer {
text-align: center;
}
.banner {
color: #fff;
background: #3acec2;
padding: 3.2em 0;
margin-bottom: 48px;
}
.col {
padding-right: 1em;
padding-left: 1em;
}
.main-footer {
background: #d9e4ea;
padding: 2em 0;
margin-top: 30px;
}
/* ---- Page Elements ---- */
.logo {
width: 190px;
}
.headline {
margin-bottom: 0;
}
.feat-img {
border-radius: 5px;
}
/* =================================
Media Queries
==================================== */
@media (min-width: 769px) {
.main-header,
.row {
width: 90%;
margin: 0 auto;
}
.tagline {
font-size: 1.4em;
}
}
@media (min-width: 1025px) {
.main-header,
.row {
width: 80%;
max-width: 1150px;
}
}
var $selects = $("select"),
data,
ctx = $("#myChart"),
config = {
selected: 0,
type: "pie",
options: {
responsive: true,
pieceLabel: {
render: function(args) {
var selected = function() {
var out = 0;
for (var i = 0; i < data.length; i++) {
out = out + data[i];
}
return out;
};
var percentage = Math.round(args.value / selected() * 100) + "%";
$('#'+args.label).text(percentage);
return percentage;
},
fontSize: 14,
fontStyle: "bold",
fontColor: "#fff",
fontFamily: '"Lucida Console", Monaco, monospace'
}
},
data: {
labels: ["verbal", "non-verbal", "written"],
datasets: [
{
data: [0, 0, 0],
backgroundColor: ["#09c", "#c00011", "green"]
}
]
}
};
myChart = new Chart(ctx, config);
$(".submit").on("click", function(e) {
var results = { v: 0, n: 0, w: 0 },
hasSelected = 0;
e.preventDefault();
$selects.each(function() {
var val = $(this).val();
if (val) {
results[val]++;
hasSelected = 1;
}
});
if (hasSelected) {
data = [];
$.each(results, function(k, v) {
data.push(v);
});
} else {
data = JSON.parse(localStorage.getItem("data"));
}
config.data.datasets[0].data = data;
myChart.update();
localStorage.data = JSON.stringify(data);
});
最佳答案
您需要将 .content 设置为 flex-direction: column; 以强制结果位于标题下方。
然后你可以将main-header设置为display: flex;，用justify-content: space-between来分隔标题和导航.
关于html - 导航栏 - 试图让导航栏出现在页面顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45801572/