猿问

我的span为什么不能设置absolute绝对定们呢?

           <ul class="header_login">
              <li>下载</li>
              <li>马上登录</li>
              <li>注册</li>
          </ul>
          <div class="header_search_wrapper">
          <form>
            <span id="search_tab"> 
                <a href="#">商品</a> 
                <i class="icon_1"></i> 
                <span class="header_search_sub"> 
                <a href="#">商品</a> 
                <a href="#">店铺</a> 
                </span> 
            </span> 
            <span>
            <input type="text" required="required" class="search_input" placeholder="请输入关键词……">

            <input type="submit" value="搜索">
            </span>
          </form>
          </div>


 .header_search_wrapper {
/* 包装器的相对定位*/
position:relative;
float: right;
height: 45px;
width: 425px;
line-height: 45px;
margin: 13px;
border: 2px solid #7FC7A0;
background-color: #474645;
background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(97,96,95,1.00) 20.73%,rgba(71,70,69,1.00) 100%);
background-image: -moz-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(97,96,95,1.00) 20.73%,rgba(71,70,69,1.00) 100%);
background-image: -o-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(97,96,95,1.00) 20.73%,rgba(71,70,69,1.00) 100%);
background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(97,96,95,1.00) 20.73%,rgba(71,70,69,1.00) 100%);
}
/* span 的绝对定位*/
.header_search_sub {width: 52px; display:block; position:absolute;}
.header_search_sub a {background-color:#FbFbFb; display:block; color:#7B7E7D;  border:2px #81CF82 solid;}
.search_input {height:30px; width:300px;}
.header_login {float:right; line-height:70px; list-style:none;}
.header_login li {float:left; width:75px; color:#747878;}
.icon_1 {width:15px; height:12px; background:url(../images/i_1.jpg) left no-repeat; display:inline-block;}

58004e5d00015bc805000227.jpg

/* span 的绝对定位*/

.header_search_sub {width: 52px; display:block; position:absolute; left:-1px;}

.header_search_sub a {background-color:#FbFbFb; display:block; color:#7B7E7D;  border:2px #81CF82 solid;}

.search_input {height:30px; width:300px;}

.header_login {float:right; line-height:70px; list-style:none;}

.header_login li {float:left; width:75px; color:#747878;}

.icon_1 {width:15px; height:12px; background:url(../images/i_1.jpg) left no-repeat; display:inline-block;}

58004f860001cb7005000154.jpg

58004f860001a55105000179.jpg



未来99
浏览 2178回答 1
1回答

未来99

知道了,原来是我自己对三个定位的方式没有认真理解。
随时随地看视频慕课网APP
我要回答