Question

这是我的html内容。这里的文字没有进去。它只是飞到外面

<!DOCTYPE HTML>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700|Open+Sans:300,400,600,700" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="Css/proj_css.css">
</head>
<body>

<div class = 'header'>
        <div class = 'header-top'>
            <i class="fa fa-facebook"  style="font-size:18px; color: #656565 ; padding-right :25px;"></i>
            <i class="fa fa-twitter"  style="font-size:18px; color: #656565 ; padding-right :25px;"></i>
            <i class="fa fa-google-plus"  style="font-size:18px; color: #656565 ;"></i>
            <span id = 'top'>
            <a> MY ACCOUNT</a> <a> LOG IN </a> <a> REGISTER </a> <a> CONTACT US</a>
            </span>
        </div>
        <hr>
        <div class = 'header-menu'>
             <a class = "userLink" >L</a><a class = "userLink" id = 'pink'>OG</a> <a class = "userLink" >O </a>

             <ul id = 'horizontal-list'>
                <li><a>HOME &nbsp</a></li>
                <li><a>WEFTED BUNDLES &nbsp</a></li>
                <li><a>CLOSURES &nbsp</a></li>
                <li><a>CLIP-INS &nbsp</a></li>
                <li><a>COLORED WELFED BUNDLES &nbsp</a></li>
             </ul>
        </div>
</div>
</body>
</html>

这是css：

.header-top{
padding-left : 178px;
padding-right : 178px;
 height: 41px;

}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #E0E0E0;


}

ul{ 
padding-left : 0px;
width : 300px;
}


i{

padding-top : 12px; 

}

#horizontal-list a{
font-family : Lato;
font-size: 18px;
line-height: 23px;  
}

.header-top a{
font-family : Lato;
font-size : 14px;
color: #656565 ;
padding-left : 24px;
text-align: left;
}
a#pink{
color : #E25889;
}
ul#horizontal-list {
min-width: 696px;
list-style: none;



}

ul#horizontal-list li {
    display: inline;

}


a.userLink {

height: 136px;
display: table-cell;
vertical-align:middle;
text-align:center;
color: #000000;
text-decoration: none;
font-family: "Open Sans";
font-weight: bold;
font-size: 48px;
letter-spacing: 5px;
line-height: 26px;
}
span#top{

padding-left : 470px;
}
.header-menu span{
vertical-align : middle;
}
.header-menu{
padding-left : 178px;
padding-right : 178px;
 height: 136px;
}

我尝试了很多事情，但我无法做到。我只想在文本LOGO前面的文本，如图像.. Look at the image . The text is going out of the div with class header-menu

Answer 1

听起来你想要＆＃39; logo＆＃39;部分位于标题的左侧。

你需要做一个漂浮：左边＆＃39;到那个形象。我认为最简单的方法可能是添加一些css到＆＃39; .userLink＆＃39;

所以它应该在.css文件中看起来像这样：

.userLink {
  float:left;
}

看看是否有效。

为什么我的文字在div之外？

1 个答案: