<!DOCTYPE html>
<html>
<head>
<!-- Displayed on tab -->
<title>FBLA -</title><!-- Tells the browser which character set to use -->
<meta charset="utf-8"><!-- Defines a description for our web page -->
<meta content=
"A Future Business Leaders of America chapter website dedicated to giving our members the most accurate and updated information."
name="description"><!-- Defines keywords for search engines (Googles, Firefox, Safari, etc.) -->
<meta content="" name="keywords"><!-- Defines author(s) of the webpage -->
<meta content="Jabari" name="author">
<!-- Makes sure our website looks similar or the same on every device -->
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<!-- Links an external style sheet to the HTML page -->
<link href="Websites/FBLA Website/styles/style.css" rel="stylesheet">
</head>
<body>
<!-- Defines header of the webpage -->
<header>
<h1>FBLA Chapter</h1>
<!-- Makes a horizontal navigation bar -->
<ul>
<li><a class="what-im-looking-at" href="index.html">Home</a>
</li>
<li><a href="chapter.html">Our Chapter</a>
</li>
<li><a href="members.html">For Our Members</a>
</li>
<li><a href="comp.html">Competition</a>
</li>
<li><a href="contact.html">Contact Info</a>
</li>
</ul>
</header>
<div id="main">
<h2 id="title-home">FBLA - Homepage</h2>
</div>
<div id="sidebar">
<h2 id="title-remind">Remind</h2>
<p id="remind-link">New to FBLA? Sign up for Remind to receive reminders about meetings events,
etc.<br>
Text: @<br>
To:81010<br></p>
<h2 id="title-calender">Upcoming 2018-19 Events</h2>
<p id="calender-2018-19"><i>August</i><br>
Aug. 1 - Chapter Challenge - "Supper Sweeps" begins<br>
Aug. 31 - Officer applications are due<br>
<br>
<i>September</i><br>
Sept. ?? to Sept. ?? - Club Week<br>
Sept. 19 - First Meeting 2pm - 3pm<br>
Sept 24 - Membership Dues are <b>due</b><br>
Sept 27 - Installation Ceremony<br>
<br>
<i>October</i> Oct. ?? - Chapter Challenge -Super Sweets ends.<br>
<br>
<br></p>
</div>
</body>
</html>
风格
h1 {
text-align:center;
color:white
}
body {
background-color:darkgreen;
font-family:"New Times Roman";
}
ul {
list-style:none;
margin:0;
padding:0;
overflow:hidden;
background-color:white;
border-radius:5px;
}
li {
float:left;
}
li a {
display:block;
color:black;
text-align:center;
padding:15px 95.5px;
text-decoration:none;
}
li a:hover {
background-color:darkred;
}
#title-remind, #title-calender {
text-align:center;
font-size:16px;
padding-top:1em;
}
.what-im-looking-at {
background-color:darkred;
}
#main {
background-color:white;
border-radius:5px;
width:1000px;
height:auto;
}
#title-home {
text-align:center;
padding:0;
}
#sidebar {
border-radius: 5px;
background-color:white;
width:330px;
margin-left:1014.5px;
margin-top:-46.5px;
}
#remind-link, #calender-2018-19 {
text-align:center;
}
我的网站图片
我遇到的问题是，如果我使侧边栏变大，那么我的导航栏将不会全部在同一行上。如何使我的导航栏保持在同一行上，但我也可以向侧边栏添加更多内容？我需要能够为即将发生的事件等编辑它。我对编码相当陌生，所以这绝对是一个我不知道如何解决的问题。
好的。这不是侧边栏问题。我已经使用弹性框修复了您的代码。删除了不必要的巨大边距和填充;
我用div包装了您的侧边栏和主要内容。
<div class="wrapper">
<div class="main"></div>
<div class="sidebar"></div>
</div>
然后只需将弹性框应用于包装器div 并为子div 分配宽度。只需根据需要更改弹性值即可。
.wrapper {
width: 100%;
display: flex;
padding-top: 20px;
}
#main {
background-color:white;
border-radius:5px;
flex: 0 0 68%;
margin-right: 2%;
height:auto;
}
#sidebar {
border-radius: 5px;
background-color:white;
width:0 0 30%;
}
对导航栏也做了同样的事情。只需根据您的需求进行设计
实时链接 ：-
https://codepen.io/anon/pen/rvKQBz