Question

你好，我在创建这个导航栏时遇到问题...因为我不能完全空间div我想要的。请建议一些方法来解决这个问题。我没有什么可说的，因为我已经包含了我尝试过的图像和代码，stackoverflow要求我添加更多细节。

我正在尝试创建此导航栏：

iam trying to create this navbar

*{
  margin: 0;
  padding: 0;
}
.container{
  display: flex;
  width: 90%;
  margin:  0 auto;
  background-color: white;
  border-bottom: 1px solid black;
  align-items:center;
 justify-content:center;
 flex-wrap: wrap;

}
.container .rightmenu{
    flex-direction: row-reverse;
}
div:nth-of-type(1) {flex-grow: -1;}
div:nth-of-type(2) {flex-grow: 1;}
div:nth-of-type(3) {flex-grow: 15;}
div:nth-of-type(4) {flex-grow: 5;}
div:nth-of-type(5) {flex-grow: 1;}
.container li{
  display: inline;
  padding: 12px;
  color: #6b6b6b;
  font-weight: 400;
  font-family: sans-serif-light;
  font-size: 14px;

}
a{
  text-decoration: none;
}
.img{
  padding: 2px;
  text-align: center;
}
.img  img {
 width:44px;
 height: 44px;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jJio Nav Bar</title>
  <link rel="stylesheet" type="text/css" href="style.css"
<body>
 <div class="container">
   <div class="imghome"> <a href="#"><img src="jio/home-white-icon.png" /></a>
   </div>
   <div class="leftmenu">
     <ul>
      <li><a href="#">PLANS</a></li>
      <li><a href="#">DEVICES</a></li>
      <li><a href="#">APPS</a></li>
      <li><a href="#">FIND A STORE</a></li>
     </ul>
   </div>
   <div class="img"><img src="jio.png" /> </div>
  <div class="rightmenu">
    <ul>
    <li><a href="#">SUPPORT</a></li>
    <li><a href="#">SIGN IN</a></li>
    <li><a href="#">QUICK PAY</a></li>
    <li><a href="#"></a>CART 0</li>
    </ul>
    </div>
    <div class="imgsearch"><a href="#"><img src="jio/search-white-icon.png"/> </a>
    </div>
 </div>
</body>
</html>

Answer 1

如果您删除所有import os import re from functools import partial from six.moves.urllib.parse import urlparse from requests import HTTPError from twisted.internet.task import cooperate from txrequests import Session class HttpClientMixin(object): def __init__(self, *args, **kwargs): self._http_session = None def http_download(self, url, dst, callback, errback=None, **kwargs): dst = os.path.abspath(dst) # Log request deferred_response = self.http_session.get(url, stream=True, **kwargs) deferred_response.addCallback(self._http_check_response) deferred_response.addCallbacks( partial(self._http_download, destination=dst, callback=callback), partial(self._http_error_handler, url=url, errback=errback) ) def _http_download(self, response, destination=None, callback=None): def _stream_download(r, f): for chunk in r.iter_content(chunk_size=128): f.write(chunk) yield None def _rollback(r, f, d): if r: r.close() if f: f.close() if os.path.exists(d): os.remove(d) filehandle = open(destination, 'wb') cooperative_dl = cooperate(_stream_download(response, filehandle)) cooperative_dl.whenDone().addCallback(lambda _: response.close) cooperative_dl.whenDone().addCallback(lambda _: filehandle.close) cooperative_dl.whenDone().addCallback( partial(callback, url=response.url, destination=destination) ) cooperative_dl.whenDone().addErrback( partial(_rollback, r=response, f=filehandle, d=destination) ) def _http_error_handler(self, failure, url=None, errback=None): failure.trap(HTTPError) # Log error message if errback: errback(failure) @staticmethod def _http_check_response(response): response.raise_for_status() return response @property def http_session(self): if not self._http_session: # Log session start self._http_session = Session() return self._http_session属性并以这种方式修改flex-grow课程

img

您的页面将与您所包含的图片类似。

希望这会对你有所帮助。

根据需要在div之间的flexbox空间

1 个答案: