Question

我有一个侧导航栏，我已将浮动设置为正确然后当我把位置：固定;它漂浮到左边为什么会这样？有谁可以帮助我？

这是我的HTML：

<div id="navbar">
 <ul>
 <li><a href="default.asp">&nbsp; &nbsp;<i class="fa fa-pagelines fa-2x"></i></a></li>
 <li><a href="news.asp">&nbsp; &nbsp;<i class="fa fa-smile-o fa-2x"></i></a></li>
 <li><a href="contact.asp">&nbsp; &nbsp;<i class="fa fa-envelope-o fa-2x"></i></a></li>
<li><a href="about.asp">&nbsp; &nbsp;<i class="fa fa-home fa-2x"></i></a></li>
 <li><a href="default.asp">&nbsp; &nbsp;<i class="fa fa-plus-square fa-2x"></i></a></li>
 <li><a href="news.asp">&nbsp; &nbsp;<i class="fa fa-bell-o fa-2x"></i></a></li>
 <li><a href="contact.asp">&nbsp; &nbsp;<i class="fa fa-cog fa-2x"></i></a></li>
 <li><a href="about.asp">&nbsp; &nbsp;<i class="fa fa-clock-o fa-2x"></i></a></li>
 <li><a href="about.asp">&nbsp; &nbsp;<i class="fa fa-power-off fa-2x"></i></a></li>
</ul>
</div>

这是我的css：

#navbar{
position:fixed;


}
    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    height:auto;
    width: 70px;
  background: rgba(255, 255, 255, 0.1);
    float:right;
}


li a {
    display: block;
    color: #ffffff;
    padding: 22.2px 10px;
    text-decoration: none;
     -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-appearance: none;
}

li a:hover,li a:focus {
    background-color:#28a828;
    color: green;

}

谢谢：）

Answer 1

发生这种情况是因为与position: fixed元素相比，position: relative元素不会在整个宽度上延伸。

所以你可以设置：

#navbar {
 width: 100%;
 position:fixed;
}

他们会很好地工作：JSFiddle

另一种方法是，您可以删除float: right中的ul，并设置为#navbar上/右。

这也可以：JSFiddle

Answer 2

您需要制作ID为＆＃39;内容＆＃39;的div标签。或类似的东西：function onEdit(e) { var ss = SpreadsheetApp.getActiveSpreadsheet(); // Active range var eventRange = e.range; // Active range address var eventRangeA1 = eventRange.getSheet().getName() + "!" + eventRange.getA1Notation(); // Comparison range name var sourceRange = ss.getRangeByName("rLXbar1"); // Comparison range address var sourceRangeA1 = sourceRange.getSheet().getName() + "!" + sourceRange.getA1Notation(); if (eventRangeA1 === sourceRangeA1) { // Target range name var targetRange = ss.getRangeByName("rLamp08"); targetRange.setValue(sourceRangeA1.value); } }。

然后在CSS中给它一个<div id="content">或left-margin或者那个大小的东西。（我建议使用EM，因为它们可以通过Web浏览器扩展并在任何平台上工作）

您的最终代码应如下所示：

<强>的index.html

80px

<强> stylesheet.css中

<div id="navbar">
 <ul>
 <li><a href="default.asp">&nbsp; &nbsp;<i class="fa fa-pagelines fa-2x"></i></a></li>
 <li><a href="news.asp">&nbsp; &nbsp;<i class="fa fa-smile-o fa-2x"></i></a></li>
 <li><a href="contact.asp">&nbsp; &nbsp;<i class="fa fa-envelope-o fa-2x"></i></a></li>
<li><a href="about.asp">&nbsp; &nbsp;<i class="fa fa-home fa-2x"></i></a></li>
 <li><a href="default.asp">&nbsp; &nbsp;<i class="fa fa-plus-square fa-2x"></i></a></li>
 <li><a href="news.asp">&nbsp; &nbsp;<i class="fa fa-bell-o fa-2x"></i></a></li>
 <li><a href="contact.asp">&nbsp; &nbsp;<i class="fa fa-cog fa-2x"></i></a></li>
 <li><a href="about.asp">&nbsp; &nbsp;<i class="fa fa-clock-o fa-2x"></i></a></li>
 <li><a href="about.asp">&nbsp; &nbsp;<i class="fa fa-power-off fa-2x"></i></a></li>
</ul>
</div>

<div id="content">
<h1>CONTENT</h1>
<h1>CONTENT</h1>
<h1>CONTENT</h1>
<h1>CONTENT</h1>
<h1>CONTENT</h1>
<h1>CONTENT</h1>
</div>

您可以在此处查看此演示的演示：JSfiddle DEMO。

位置为“固定”时的侧导航栏

2 个答案: