Question

<!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;
}

Image of my website

我遇到的问题是，如果我让侧边栏更大，那么我的导航栏就不会出现在同一条线上。我如何制作它以使我的导航栏保持在同一条线上，但我还可以在侧边栏中添加更多内容？我需要能够为即将发生的事件等编辑它。我对编码很新，所以这绝对是一个我不知道如何修复的问题。

Answer 1

好吧..这不是侧边栏问题。我已经使用flexbox修复了你的代码。删除了不必要的巨大边距和填充;

我用侧边栏包裹你的侧边栏和主要内容。

<div class="wrapper">
  <div class="main"></div>
  <div class="sidebar"></div>
</div>

然后只需将flexbox应用于包装器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

无论如何我可以让我的导航栏静止，而不是调整到我的侧边栏？

1 个答案: