current position:Home>Question about CSS: since I have div nesting, how can I write CSS style

Question about CSS: since I have div nesting, how can I write CSS style

2022-02-04 16:50:33 CSDN Q & A

chart 1 I wrote the code , chart 2 Is the rendering of the code , chart 3 This is the effect picture I need to realize . Because I have div Nesting of , Excuse me, css How should I write the style ?

img

img

img




Take the answer :

float Layout , The main code of the problem is as follows , Help, please Adopt 【 This answer is in the upper right corner 】, thank you ~~ If you have other questions, you can continue to communicate ~

img

Because the subject uses font-awesome, Not by this machine , The title owner introduces himself

<!doctype html><meta charset="utf-8" /><style>.header{ 
    position:relative;overflow:hidden;padding:20px 10px}.header .nav{ 
    float:left;}.header .nav ul{ 
    overflow:hidden;margin:0;padding:0}.header .nav li{ 
    float:left;list-style:none;padding:0 10px;}.header a{ 
    color:#333;text-decoration:none;}.header .nav li a.cur{ 
    color:sandybrown;}.header .logo{ 
    position:absolute;left:50%;top:50%;margin-left:37px;margin-top:-15px;}.header .logo img{ 
    height:30px}.header .search,.header .user{ 
    float:right}.header .search{ 
    border:solid 1px #333;border-radius:20px;position:relative;padding:0 10px}.header .search input{ 
    display:block;border:none;line-height:20px;outline:none}.header .search button{ 
    position:absolute;right:0;top:0;border-radius:50%;background:transparent;border:none}.header .user{ 
    margin-left:10px}</style><div class="header">    <div class="nav">        <ul>            <li><a href="#" class="cur"> home page </a></li>            <li><a href="#"> Destination </a></li>            <li><a href="#"> video </a></li>            <li><a href="#"> Plane ticket </a></li>            <li><a href="#"> Hotel accommodation </a></li>            <li><a href="#"> Tourist mall </a></li>        </ul>    </div>    <div class="logo">        <img src="images/logo.png" />    </div>    <div class="user">        <a href="#"> Sign in </a>/<a href="#"> register </a>    </div>    <div class="search">        <input type="text" placeholder=" Search for your desired destination " name="search" />        <button type="submit"><i class="fa fa-search"></i></button>    </div></div>


Other answers 2:

Definition class, Put the inside div binding class that will do .

copyright notice
author[CSDN Q & A],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/02/202202041650312106.html

Random recommended