Question

我通过div标签在导航栏中插入了一张图片。仅当值为百分比时，图像的大小才会更改。只有宽度会改变大小，但它会保持纵横比相同，因此我无法独立编辑宽度和高度。我该如何解决？哦，有人可以告诉我如何制作它，以便导航栏完全覆盖顶部？ THX

＆＃13;

ul {
  list-style-type: none;
  margin: 0px auto;
  background-color: #f1f1f1;
  position: fixed;
  width: 95%;
  height: 10%;
  text-align: center;
  border: 3px solid #999
}

.nav img {
  float: left;
  margin-right: 0;
  padding: 0;
  width: 17.9%;
  height: 0.05%
}

li {
  display: inline-block;
  margin: 2%
}

li a {
  font-size: 160%;
  color: #000;
  background-color: #81DAF5;
  text-decoration: none
}

li a:hover {
  color: blue;
  background-color: #FFFFFF;
  transition: background 0.3s linear
}

＆＃13;

<ul>
  <div class="nav">
    <a href="index.html">
      <img src="http://placehold.it/100x100" alt="Logo">
    </a>
  </div>
  <li><a href="#">Page</a></li>
</ul>

＆＃13;

Answer 1

试试这个https://jsfiddle.net/28kL2hvu/1/

您不希望div中的ul先将li包裹在<div class="parent"> <div class="nav"> <a href="index.html"> <img src="navpic.png" alt="Logo"> </a> </div> <div><a href="#">Page</a></div> </div> .parent { list-style-type: none; margin: 0px auto; background-color: #f1f1f1; position: fixed; width: 500px; height: 50px; text-align: center; border: 3px solid #999 } .nav img { float: left; margin-right: 0; padding: 0; width: 25px; height: 10px } li { display: inline-block; margin: 2% } li a { font-size: 160%; color: #000; background-color: #81DAF5; text-decoration: none } li a:hover { color: blue; background-color: #FFFFFF; transition: background 0.3s linear }中。在宽度和高度上使用百分比时，需要将父容器的宽度和高度设置为特定值。因此，当您在子div上使用百分比值表示高度和宽度时，它们只会增长到父容器上的指定值。

<p:orderList id="orderListAppList" value="#{manageApplications.listOfApplicationsAndIds}" var="app" controlsLocation="none" itemLabel="#{app.applicationName}" itemValue="#{app.applicationId}" >
    <p:ajax event="select" listener="#{manageApplications.onSelect}"/>
    <p:ajax event="unselect" listener="#{manageApplications.onUnselect}"/>
</p:orderList>

Answer 2

问题是您设置为%ul a fixed height，它必须是auto height或px-els中的高度，以便子div可以使用％值来表示身高。

ul {
    list-style-type: none;
    margin: 0px auto;
    background-color: #f1f1f1;
    position: fixed;
    width: 95%;
    height: auto;
    text-align: center;
    border: 3px solid #999;
    display: flex;
}
.nav img {
    margin-right: 0;
    padding: 0;
    width: 50px;
    height:70px;
}
li {
    display: inline-block;
    margin: 2%
}
li a {
    font-size: 160%;
    color: #000;
    background-color: #81DAF5;
    text-decoration: none
}
li a:hover {
    color: blue;
    background-color: #FFFFFF;
    transition: background 0.3s linear
}

<ul>
  <div class="nav">
    <a href="index.html">
      <img src="http://placehold.it/100x100" alt="Logo">
    </a>
  </div>
  <li><a href="#">Page</a></li>
</ul>

现在。您的HTML格式不正确。在％ul标签内，您必须只有％li标签

<ul>
  <div class="nav">
    <a href="index.html">
      <img src="http://placehold.it/100x100" alt="Logo">
    </a>
  </div>
  <li><a href="#">Page</a></li>
</ul>

上述代码的和平可以重构为

<div class="logo">
    <a href="index.html">
      <img src="http://placehold.it/100x100" alt="Logo">
    </a>
  </div>
<ul class="navigation">
  <li><a href="#">Page</a></li>
</ul>

图像未在导航栏中正确调整大小

2 个答案: