如何移动包含图像的div

时间:2019-04-11 09:04:59

标签: css

我似乎无法在div中移动图像。它只能在绝对定位的情况下移动,这是我不能接受的。有人可以指出为什么下面给出的代码不起作用。我希望所有3个div都排成一行。图像似乎卡在了左上角。应用填充也没有任何改变。请帮助

<div class="container" style="display:table">
  <div style="display:table-cell">
    <div class="emblem" style="padding:0 0 0 20px ;display:table-cell"></div>
    <div class="logo" style="display:table-cell" Software Solutions</div>
    </div>
    <div class="header" style="">
      <nav>
        <ul style="display:flex;justify-content">
          <li><a href="{% url 'signin2' %}" target="ifr" ONCLICK="setTitle1()"> Home</a></li>
          <li>
            <a href="{% url 'aboutus' %}" target="ifr" onclick="setTitle2()">
              <title>RCE-About</title>About Us</a>
          </li>
          <li><a href="{% url 'products' %}" target="ifr" onclick="setTitle3()">Products</a></li>
          <li><a href="{% url 'contacts' %}" target="ifr" onclick="setTitle4()">Solutions</a></li>
          <li><a href="{% url 'contacts' %}" target="ifr" onclick="setTitle5()">Support</a></li>
        </ul>
      </nav>
    </div>
  </div>

1 个答案:

答案 0 :(得分:1)

您可能需要这样做。

编辑:已编辑的代码段,导航栏位于徽标下方,但宽度为100%

.container{
  display:flex;
  justify-content: flex-start;
  flex-wrap:wrap;
 
  background:gray;
  padding:5px;
}
.navbar-container{
  width:100%
}
.container > div{
  display:block;
  height: 50px;
  background: red;
  margin-right: 15px;
  padding:15px;
  text-align:center;
}
ul{
  margin:0;
  padding:0;
}
ul li{
  display:inline-block;
}
<div class="container">
  <div class="1">Some text</div>
  <div class="logo">LOGO</div>
  <div class="navbar-container">
    <div class="navbar">
      <ul>
        <li>test1</li>
        <li>test2</li>
        <li>test3</li>
      </ul>
    </div>
  </div>
</div>