我似乎无法在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>
答案 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>