Question

基本上我希望在我的网站上有一个固定的导航栏，当你向下滚动时它随你一起移动。到目前为止一切都很好，但我真的很难将栏目集中在一起。

HTML

<header id="header">
<nav id="nav">
    <ul>
    <li><a href="#slide1">Front</a></li>
    <li><a href="#slide2">Mastering</a></li>
    <li><a href="#slide3">Samples</a></li>
    <li><a href="#slide4">Contact</a></li>
    </ul>
</nav>
</header>

CSS

#header {
z-index: 1;
width: 100%;
height: 80px;
position: fixed;
background-color:rgba(0,0,0,0.8);
display: block;
}

#nav { 
z-index: 1;
width:100%;
margin-top: 20px;
display: block;
position: fixed;
text-align:center;
}

#nav ul{
list-style: none;
display: block;
margin: 0 auto;
width: 50%;
/* To help to identify the location */
height:50px;
background-color:green;
}

#nav li{
margin-top: 9px;
float: left;
padding-left: 21px;
display:block;
}

的jsfiddle https://jsfiddle.net/kjr1591d/1/

愿意得到一些帮助。提前谢谢你：）

Answer 1

我认为你在寻找类似的东西 -

@Override 
protected void onPostExecute(String s) { 
 super.onPostExecute(s); 
 loading.dismiss();
 try{ 
  JSONObject jsonObject=new JSONObject(s);
  int latestID=jsonObject.optInt("lastId");
  //call setResult here 
  ....
  returnIntent.putExtra("project1", project1); 
  returnIntent.putExtra("description", description); 
  returnIntent.putExtra("progress", progress); 
  returnIntent.putExtra("timeIn", timeIn); 
  returnIntent.putExtra("iD", latestID);  //<<<
 }catch(Exception ex){

 }
}

#header {
    z-index: 1;
    width: 100%;
    height: 80px;
    position: fixed;
    background-color:rgba(0,0,0,0.8);
    display: block;
}

#nav { 
    z-index: 1;
    width:100%;
    margin: 15px 0;
    display: block;
    position: fixed;
    text-align:center;
}

#nav ul{
    list-style: none;
    display: block;
    margin: 0 auto;
    width: 50%;
    /* To help to identify the location */
    height:50px;
    background-color:green;
    text-align:center;
    padding:0
}

#nav li{
    margin:15px 0 0;
    /*float: left;*/
    padding:0 10px;
    display:inline-block;
}

Answer 2

jiddle

#nav ul{
list-style: none;
display: block;
margin: 0 auto;
width: 80%;
/* To help to identify the location */
height:50px;
background-color:green;
}

Answer 3

更改ul和li以显示为inline-block，并为li分配相等大小的左右边距。

麻烦中心固定导航栏

3 个答案: