发表新帖
发表新帖

Horizontally centering/evenly distributed
  • inside of
      inside a

    • 前端 未结
    关注
    8 1701
    情书的邮戳
    情书的邮戳 2020-12-08 07:34

    Have a Navbar

    相关标签:
    8条回答
    • 别跟我提以往
      2020-12-08 07:40

      This allows a widthless centered dynamic ul if you don't want to specify 90% width:

      <!doctype html>
<div class="navbar">
    <div id="for-ie">
        <ul>
            <li><a href="Home">Home</a></li>
            <li><a href="Discounts">Discounts</a></li>
            <li><a href="Contact">Contact Us</a></li>
            <li><a href="About">About Us</a></li>
        </ul>
    </div>
</div>
<style>
.navbar {
    width: 100%;
    margin-left: auto ;
    margin-right: auto ;
    background-color: #ABCDEF;
}
.navbar ul {
    list-style-type: none; /*to remove bullets*/
    text-align: center;
    margin: 0 auto;
    padding: 0px;
    border:1px solid red;
    display:table;
    overflow: hidden;
}
.navbar li{
    float: left;
    padding: 2px;
    width: 150px;
    margin-left: auto ;
    margin-right: auto ;
}
</style>
<!--[if IE]>
<style>
    #for-ie { text-align:center; }
    #for-ie ul { display:inline-block; }
    #for-ie ul { display:inline; }
</style>
<![endif]-->

      Tested in IE6, FX 3.

      EDIT: Alternate style without the extraneous element:

      <!doctype html>
<div class="navbar">
    <ul>
        <li><a href="Home">Home</a></li>
        <li><a href="Discounts">Discounts</a></li>
        <li><a href="Contact">Contact Us</a></li>
        <li><a href="About">About Us</a></li>
    </ul>
</div>
<style>
.navbar {
    width: 100%;
    margin-left: auto ;
    margin-right: auto ;
    background-color: #ABCDEF;
}
.navbar ul {
    list-style-type: none; /*to remove bullets*/
    text-align: center;
    padding: 0px;
    zoom:1;
    border:1px solid red;
    overflow: hidden;
}
.navbar li{
    padding: 2px;
    width: 150px;
    display:inline-block;
}
</style>
<!--[if IE]>
<style>
    .navbar li { display:inline; }
</style>
<![endif]-->
      0 讨论(0)
    • 小鲜肉
      2020-12-08 07:40

      Are you looking for something like this:?

      .navbar {
    width: 100%;
    margin-left: auto ;
    margin-right: auto ;
    background-color: #ABCDEF;
}
.navbar ul {
    list-style-type: none; /*to remove bullets*/
    text-align: center;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}
.navbar li{
    display:inline;
    line-height:30px;
}
.navbar li a { padding:.4em 5em;}


<div class="navbar">
  <ul>
    <li><a href="Home">Home</a></li>
    <li><a href="Discounts">Discounts</a></li>
    <li><a href="Contact">Contact Us</a></li>
    <li><a href="About">About Us</a></li>
  </ul>
</div>
      0 讨论(0)
    • 花落未央
      2020-12-08 07:41

      You can use text-align:fixed to do this with just a few lines of CSS, no extra markup.

      See my answer here: https://stackoverflow.com/a/15232761/87520

      <ul>
<li><a href="Home">Home</a></li>
<li><a href="Discounts">Discounts</a></li>
</ul>

<style>
.navbar > ul {text-align:justify;}
.navbar > ul > li {display:inline-block}
.navbar > ul:after { content:' '; display:inline-block; width: 100%; height: 0 } 
</style>
      0 讨论(0)
    • 醉话见心
      2020-12-08 07:44

      The proper way to do this these days is to just use Flexbox:

      .navbar ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: nowrap; /* assumes you only want one row */
}
      0 讨论(0)
    • 隐瞒了意图╮
      2020-12-08 07:52

      you need to define a fixed width for your container .

      for example:

      .navbar {
width: 1000px; /* */
margin: 0 auto;
background-color: #ABCDEF; }

      if you want to keep your bg color of .navbar, stick with 100%, remove float left from li and style it like this->

      .navbar ul {
    list-style-type: none; /*to remove bullets*/
    text-align: center;
    margin: 0 auto;
    padding: 0px;
    width: 800px;
    overflow: hidden;
}
.navbar li{
    display: inline-block;
    padding: 2px;
    width: 150px;
    marign: 0 auto;
}
      0 讨论(0)
    • 梦如初夏
      2020-12-08 07:54

      you can use "display: table" and "display: table-cell" the code is cleaner and the li width isn't hardcoded:

      <div class="navbar">
    <ul>
        <li><a href="Home">Home</a></li>
        <li><a href="Discounts">Discounts</a></li>
        <li><a href="Contact">Contact Us</a></li>
        <li><a href="About">About Us</a></li>
    </ul>
</div>

.navbar {
    background-color: #ABCDEF;
}
.navbar ul {
    list-style-type: none;
    padding: 0px;
    display: table;
    table-layout: fixed;
    width: 100%;
}
.navbar li{
    padding: 2px;
    display:table-cell;
    width: 50px; /* just for the browser to get idea that all cells are equal */
    text-align: center;
    border: 1px solid #FF0000;
}

      http://jsfiddle.net/dchwv6qn/1/

      0 讨论(0)
     看不清?
    提交回复
    热议问题