After inputting the image following the code, you should have a better comprehension.
I devised a navigation bar through an unordered list (ul), yet when I incorporate a text box within my listing, it occupies the neighboring space.
Below is the HTML and CSS code snippet.
<html>
<head>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.top-header{
width:100%;
height:40px;
background:#FFFFFF;
}
.top-header>img{
float:left;
width:70px;
height:25px;
padding-left:10px;
padding-top:8px;
padding-right:10px;
padding-left: 100px;
}
.signinimg{
float:left;
border-left:1px solid #E4E4E4;
padding-top: 8px;
height:32px;
padding-left: 20px;
}
.signin{
float:left;
padding-top:12px;
font-family:Arial,Helvetica,freesans,sans-serif;
font-size:80%;
padding-right:10px;
font-weight:bold;
padding-right:100px;
}
.topnav{
float:left;
list-style:none;
}
.topnav>.t1{
height:40px;
width:60px;
border-left:1px solid #E4E4E4;
display:inline-block;
text-align: center;
}
.topnav>.t2{
height:40px;
width:140px;
border-left:1px solid #E4E4E4;
display:inline-block;
text-align: center;
border-right:1px solid #E4E4E4;
}
.topnav>.t1>a{
text-decoration: none;
color:black;
font-family:Arial,Helvetica,freesans,sans-serif;
font-weight: bold;
font-size:80%;
line-height:40px;
}
.topnav>.t2>a{
text-decoration: none;
color:black;
font-family:Arial,Helvetica,freesans,sans-serif;
font-weight: bold;
font-size:80%;
line-height:40px;
position: relative;
left:-40px;
}
</style>
<title>Home-BBC News</title>
</head>
<body>
<div class="top-header">
<img src="logo.png">
<div class=signinimg><img src="signin.PNG"></div>
<div class="signin">Sign In</div>
<ul class="topnav">
<li class="t1"><a href="#">News</a></li>
<li class="t1"><a href="#">Sport</a></li>
<li class="t1"><a href="#">Weather</a></li>
<li class="t1"><a href="#">Shop</a></li>
<li class="t1"><a href="#">Earth</a></li>
<li class="t1"><a href="#">Travel</a></li>
<li class="t2"><a href="#">More</a></li>
<li class="t2"><a href="#"><input type="text"></a></li>
</ul>
</div>
</body>
</html>