Question

我开始代码，我在这个网站上遇到了一些困难。首先，我在其中添加了一个nabber但我无法将其对齐，如果我尝试使用float：它会切换链接。在我想要一张大画面的所有内容下，如果我把页面放大，自动高度和宽度都不起作用。

<!DOCTYPE html>

<style>


    header{ background-color: white;
            margin-left: 20px;
            margin-top: 30px;
    }
    img.logo{ width: 200px;
              height: 30px;
    }

    li{ display: inline;
    }

    ul{ position: fixed;
        top: 20px;

    }

    a{  font-family: 'Open Sans', sans-serif;
        font-size: 20px;
        font-weight: 300;
        letter-spacing: 0.5px;
    }

    img.picvp{margin-top: 20px;
              width: auto;
              height: auto;
    }

</style>

<header>

      <img class="logo" src="#">

    <ul>
        <li style="float:right;"><a href="Site%20DIA%20main.html">Projecten</a></li>
        <li style="float:right;"><a href="#">over</a></li>
        <li style="float:right;"><a href='#'>Contact</a></li>
    </ul>

</header>

<sec>
  <img class="picvp" src="https://lh4.googleusercontent.com/G3M2vxtCatAm1yxWxUA0VVLZjtePu32ziMPd6TLL3wQhk53s4mokl5v_7Rx0crGBp_2Q6iZJnRU-lzQ=w1262-h905">
</sec>

谢谢！

Answer 1

使用display:flex将有助于此。

＆＃13;

.header{
  background-color: white;
  align-items: center;
  display: flex;
  margin-left: 20px;
  margin-top: 30px;
}
.logo{
  background-color: #0f0;
  width: 200px;
  height: 30px;
}
.nav {
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0.5px;
  margin-left: auto;
}
.nav li{ display: inline-block; }
.nav a {
  border-left: solid 1px;
  display: block;
  padding: 1em;
}
img.picvp{
  margin-top: 20px;
  width: auto;
  height: auto;
}

＆＃13;

<header class="header">

      <img class="logo" src="#">

    <ul class="nav">
        <li><a href="Site%20DIA%20main.html">Projecten</a></li>
        <li><a href="#">over</a></li>
        <li><a href='#'>Contact</a></li>
    </ul>

</header>

<sec>
  <img class="picvp" src="https://lh4.googleusercontent.com/G3M2vxtCatAm1yxWxUA0VVLZjtePu32ziMPd6TLL3wQhk53s4mokl5v_7Rx0crGBp_2Q6iZJnRU-lzQ=w1262-h905">
</sec>

＆＃13;

Answer 2

以下是解决方案的链接：Fiddle N1

您只需向课程width: 100%;添加img.picvp即可。另一件事是你应该设置你的ul元素：

 ul{ 
    position: relative;
    display: inline;
    text-align:right;
    }

text-align:right会自动将元素拉到父div的右侧。也可以使用relative定位而不是固定定位。我也对背景图像的宽度做了一些改变。比较代码的更改，以便您可以看到确切的更改。

Answer 3

我修改了一些代码，但是我使用父母和孩子作为父母和孩子的一个例子作为父母和

作为孩子参见示例如下（别忘了改变img src）

header{ background-color: white;
        margin-left: 20px;
        margin-top: 30px;
}
img.logo{ 


width: 1100px;
          height: 130px;
}

ul,li{ display: inline;
text-decoration:none;


}

a,li{ display: inline;

}

a{  font-family: 'Open Sans', sans-serif;
    text-decoration:none;
    display: inline;
}

img.picvp{margin-top: 20px;
          width: auto;
          height: auto;
}

  <img class="logo" src="nows.jpg">

<ul>
    <li style="float:right;"><a href="Site%20DIA%20main.html">Projecten</a></li>
    <li style="float:right;"><a href="#">over</a></li>
    <li style="float:right;"><a href='#'>Contact</a></li>
</ul>

HTML将导航栏右对齐，图像拟合页面

3 个答案: