display: block css funktioniert nicht in div element?

hier ist mein Code:display: block css funktioniert nicht in div element?

I Suchleiste mit einigen Unternehmen Markennamen und einige Schaltfläche auf der rechten Seite, und Suchleiste in der Mitte zu bauen.

Ich möchte, dass wir auf 786px Breite (des Bildschirms) reduzieren, dann Suchleiste (von "Suche nach:" bis zu "Go!"), Um zur nächsten Zeile weiterzugehen. aber mein Code funktioniert nicht wie erwartet. Was ist falsch?

Vielen Dank im Voraus!

HTML

<!DOCTYPE html> 
<html> 
<head> 
<title>test5</title> 
<link rel="stylesheet" type="text/css" href="test5.css"> 
</head> 
<body> 

<div class="center"> 
<div class="qwert" id="abc1"> 
    <a id="Home" href="www.bookavanue.com"><b>Brand</b></a> 
</div> 
<div class="qwert" id="abc3"> 
    <button id="Register" type="button">Register</button> 
    <button id="Login" type="button">Log In</button> 
    <button id="Cart" type="button">Cart</button> 
</div> 
<div class="qwert" id="abc2"> 
    <div id="abcd1"> 
     <label for="Search">Search by:</label> 
      <select value="Title"> 
       <option>option1</option> 
       <option>option2</option> 
       <option>option3</option> 
      </select> 
      <select value="All Books"> 
       <option>option1</option> 
       <option>option2</option> 
       <option>option3</option> 
      </select> 
    </div> 
    <div id="abcd2"> 
     <input id="Search" type="text" name="Search your book" 
     placeholder="Search Your Books..."> 
    </div> 
    <div id="abcd3"> 
     <button id="Go" type="Search">Go!</button> 
    </div> 
</div> 
</div> 
</body> 
</html>

css

#abc1{ 
float: left; 
width: 110px; 
} 
#abc3{ 
float: right; 
width: 185px; 
text-align: right; 
} 
#abc2{ 
display: block; 
width: auto; 
} 
#abcd1{ 
float: left; 
width: 220px; 
} 
#abcd3{ 
float: right; 
width: 40px; 
text-align: right; 
} 
#abcd2{ 
width: calc(100% - 270px); 
display: inline-block; 
} 
input{ 
width: 100%; 
} 
@media screen and (min-width: 786px){ 
#abc2{ 
    width: calc(100% - 295px); 
    display: inline-block; 
} 
}

Quelle

2017-06-27 rahul Kushwaha

768>

@SleekGeek zum Reduzieren. –

Dann ändern Sie die Mindestbreite: 786px zu Max-Breite: 768px vor allem anderen. –

clear:both Eigenschaft hinzufügen ... auf Ihrem abc2 Element fiddle

#abc2.qwert{ 
    clear:both; 
    }

Quelle

2017-06-27 18:09:20

Auch ohne, scheint es zu funktionieren, wenn Sie auf weit weniger als 786px reduzieren, aber wenn Sie etwa 786px rechts reduzieren, als es funktioniert nicht die "Suche nach" mit zwei Drop-Down-nicht zur nächsten Zeile zu dieser Zeit. –

Entschuldigung, ich verstehe ... jetzt funktioniert es –

Danke Mann! :-) –

display: block css funktioniert nicht in div element?

Antwort

Verwandte Themen