Question

所以我希望我的网站从左边的'h1'开始，然后在相同的高度位置开始右边的菜单，但4'li'项目总是堆叠在一起，只是赢了'进入一条线，他们总是两个。不知道我在这里做错了什么，只是找不到解决方案。

感谢您提供任何帮助。

-HTML -

for i, tweet in enumerate(...):
    if i % 200 == 0 and i > 0:
        time.sleep(180)

-CSS -

  <h1>Headline</h1>
  <nav class="menu">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="work/index.html">Portfolio</a></li>
        <li><a href="travel/index.html">Blog</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>

Answer 1

你可以通过为你的ul标签设置display：flex 来实现这一点，并删除所有浮动属性（它不会起作用）

＆＃13;

h1{
     padding: 0 4%;
     padding-top: 1%;
     text-transform: uppercase;
     float: left;
 }

 nav{
     float: right;
     padding-right: 2%;
     padding-top: 3%;
     width: auto;
 }

 .menu ul{
     display:flex;
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .menu li{ 
      margin: 0 5%;
  }

 .menu li a {
     text-decoration: none;
     color: #666666;
     font-size: 25px;
     font-weight: bold;
     display: block;
 }

＆＃13;

<h1>Headline</h1>
  <nav class="menu">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="work/index.html">Portfolio</a></li>
        <li><a href="travel/index.html">Blog</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>

＆＃13;

Answer 2

如果您愿意使用Javascript，这应该适合您：

(Complete JSFiddle demo here)

/*get the width of h1*/
var title = document.getElementById('title');
var titleS = title.currentStyle || window.getComputedStyle(title);
var titleW = title.offsetWidth + parseFloat(titleS.paddingLeft) + parseFloat(titleS.paddingRight);

var nav = document.getElementById('menu');
var navS = nav.currentStyle || window.getComputedStyle(nav);
var navP =  parseFloat(navS.paddingLeft) + parseFloat(navS.paddingRight);

/*set nav width by deducting title width from window width*/
nav.style.width = ((window.innerWidth - titleW) + navP)+'px';

console.log('(('+window.innerWidth+' - '+titleW+') + '+navP+'px)');

导航栏不会正确浮动到右侧

2 个答案: