Question

宽度未设置为100％，我做错了，不知道。

＆＃13;

.av1 {
  float: right;
  z-index: 9999;
  position: relative;
}
.av {
  display: inline-block;
  margin: .7857em 1.3em 0 0;
}
.u8 {
  position: relative;
  height: 42px;
  padding: 1.5em 0 0;
  width: 100%;
  float: left;
  background: #000;
  display: inline-block;
  left: 0
}
.si6 {
  background-position:-150px 0px;
  width:24px;height:24px
}

＆＃13;

 <span class="av1">
    <span class="av si6">
    <span class="u8">
    <form><input type="text"></form>
    </span></span>
</span>

＆＃13;

.u8的宽度无法设置为100％（页面大小）并且无法向左浮动？有人帮忙

更新：我现在有一个问题，因此我更新了代码。新的si6（搜索图标）是一个css图像精灵类，它有自己的宽度和高度（不是100％）所以，u8类的宽度不能设置为100％，任何解决方案

Answer 1

这是因为它在.av1里面限制了宽度。将width提供给.av1和.av。

＆＃13;

.av1 {
  float: right;
  z-index: 9999;
  position: relative;
  width: 100%;
}
.av {
  display: inline-block;
  margin: .7857em 1.3em 0 0;
  width: 100%;
}
.u8 {
  position: relative;
  height: 42px;
  padding: 1.5em 0 0;
  width: 100%;
  float: left;
  background: #000;
  display: inline-block;
  left: 0
}

＆＃13;

 <span class="av1">
    <span class="av">
    <span class="u8">
    <form><input type="text"></form>
    </span></span>
</span>

＆＃13;

Answer 2

将宽度设置为100％会使元素成为其父元素宽度的100％。因此，您需要为每个包含元素设置宽度。

＆＃13;

.av1 {
  width: 100%;
  float: right;
  z-index: 9999;
  position: relative;
}
.av {
  width:100%;
  display: inline-block;
  margin: .7857em 1.3em 0 0;
}
.u8 {
  position: relative;
  height: 42px;
  padding: 1.5em 0 0;
  width: 100%;
  float: left;
  background: #000;
  display: inline-block;
  left: 0
}

＆＃13;

<span class="av1">
    <span class="av">
    <span class="u8">
    <form><input type="text"></form>
    </span></span>
</span>

＆＃13;

或者您可以将元素的位置设置为绝对位置，并移除父级的位置以将其从父级的上下文中删除：

＆＃13;

.av1 {
  float: right;
  z-index: 9999;
}
.av {
  display: inline-block;
  margin: .7857em 1.3em 0 0;
}
.u8 {
  position: absolute;
  height: 42px;
  padding: 1.5em 0 0;
  width: 100%;
  float: left;
  background: #000;
  display:block;
  left: 0;
  top:0
}

＆＃13;

<span class="av1">
    <span class="av">
    <span class="u8">
    <form><input type="text"></form>
    </span></span>
</span>

＆＃13;

宽度未设置为100％

2 个答案: