Dołącz do zespołu ekspertów! Backend lub Frontend Developer?

Sprawdź najnowsze oferty pracy naszego partnera - 8lines.io!

Wstawienie elementów obok siebie

HTML  Założony przez  Patryk Stefański.

19.11.2017, 14:04
#1
Witam, tworze sobie taki mini panel i mam problem by ustawić elementy obok siebie.
Tak chciałbym mieć
   

Po wpisaniu float:right;
mam tak
   

Mój HTML
<!DOCTYPE HTML>
<html>
<head>

</head>
<body>
<h1>Obowiązki</h1>
<div class="h_er"></div>
<div id="container">
<div id="menu_lewe">
<ol class="usersy">
<li><span style="margin-left:5px;" class="wlasciciel"> Dziadek</span></li>
<li><span style="margin-left:5px;" class="wlasciciel"> ZnaQu</span></li>
<li><span style="margin-left:5px;" class="admin"> Penki</span></li>
<li><span style="margin-left:5px;" class="jadmin"> Myszka Kocha Rahima</span></li>
<li><span style="margin-left:5px;" class="gmod"> Eprise</span></li>
</ol>
</div>

<div style="clear:both;"></div>

<div id="menu_prawe">
<div id="dziadek">
<span style="wlasciciel"> Dziadek</span>
<span style="gid-4"> Właściciel</span>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
</div>
</body>
</html>

I CSS Jak coś jest więcej niż na samej stronie
body {
background: #ccc;
color: #000;
margin: auto auto;
margin-top: -20px;
}

#hr-bg {
width: 100%;
height: 140px;
background: url("images/header.png") no-repeat center;
}
#logo {
margin-left: 103px;
margin-top: 20px;
}
#menu {
background-color: #0051c0;
color: #fff;
width: 100%;
}
.napis, a:visited {
float: left;
min-width: 10%;
width: 230px;
height: 30px;
font-size: 18px;
padding: 10px;
text-align: center;
transition: 1s;
-webkit-transition: 1s;
font-weight: bold;
line-height: 27px;
color: #fff;
}

.napis:hover, a:visited {
color: #0051c0;
background-color: #fff;
}

a:link, a:visited, a:hover {
text-decoration: none;
color: #000;
}

#container {
width: 950px;
background-color: #fff;
color: #000;
margin: auto auto;
-webkit-box-shadow: 0px 6px 36px 3px rgba(0,0,0,0.78);
-moz-box-shadow: 0px 6px 36px 3px rgba(0,0,0,0.78);
box-shadow: 0px 6px 36px 3px rgba(0,0,0,0.78);
border-radius: 3px;
padding: 12px 30px 12px 30px;
margin-top: 25px;
font-size:20px;
}

li {
margin-bottom: 4px;
letter-spacing: 1px;
}

h1 {
margin-left: 260px;
color: #0051c0;
}

.h_er {
width: 750px;
margin: auto auto;
border-bottom: 1px solid #3e3e3e;
padding: 0 30px 0 30px;
}

.hinf_id {
float: left;
margin-right: 140px;
}
.hinf_a {
float: left;
margin-right: 230px;
}

.wyn_id {
float: left;
margin-right: 140px;
display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
   font-size: 12px;
   font-weight: bold;
   color: #ffffff;
   line-height: 1;
   vertical-align: middle;
   white-space: nowrap;
   text-align: center;
   background-color: #0051c0;
   border-radius: 10px;
   margin-top: 5px;
}

.wyn_nick {
float: left;
margin-right: 220px;
}

.wyn_steam {
float: left;
margin-right: 240px;
}


.wyn_h_er {
margin: auto auto;
border-bottom: 2px solid #ccc;
}

#menu_lewe {
width:33%;
float:left;
}
#menu_prawe {
float: right;
}
.usersy > li {
height:25px;
background-color: #EFEFEF;
list-style-type: none;
margin-top:-3px;
}
.wlasciciel {
   background: url(http://www.przemo.org/phpBB2/forum/files...ed_409.gif);
   text-shadow: 1px 1px 15px #006666;
   font-weight: bold;
   color: #000;
}
.admin {
text-shadow: 0px 0px 10px #ff8080;
   color: #ff8080;
   font-weight: bold;
   background: url(http://przemo.org/phpBB2/forum/files/gwi...pa_110.gif);
}
.jadmin {
text-shadow: 0px 0px 10px #0066ff;
   color: #0066ff;
   font-weight: bold;
   background: url(http://przemo.org/phpBB2/forum/files/gwi...ue_505.gif);
}
.tforum {
text-shadow: 0px 0px 10px #80afff;
   color: #5f9aff;
   font-weight: bold;
   background: url(http://przemo.org/phpBB2/forum/files/gwi...ue_505.gif);
font-size: 12.5px;
}
.gmod {
text-shadow: 0px 0px 10px #009900;
   color: #009900;
   font-weight: bold;
   background: url(http://przemo.org/phpBB2/forum/files/gwi...en_134.gif);
}
.mod {
text-shadow: 0px 0px 10px #17D90D;
   color: #17D90D;
   font-weight: bold;
}
.profile-rank span {
font-size: 11px;
   font-weight: bold;
   padding: 2px 6px;
   margin: 5px 0;
   color: #fff;
   border-radius: 3px;
   display: inline-block;
}
.gid-4 {
background-color: #006666;
}
.gid-3 {
background-color: #ff8080;
}
.gid-6 {
background-color: #0066ff;
}
.gid-8 {
background-color: #80afff;
}
.gid-9 {
background-color: #009900;
}
.gid-10 {
background-color: #17D90D;
}
Akcja "Dziękuję za pomoc"
Kasujesz link - nie licz na wsparcie
19.11.2017, 14:10 (Ten post był ostatnio modyfikowany: 19.11.2017, 14:11 przez Divir.)
#2
https://jsfiddle.net/abexgkwa/1/

Przypatrz się zmianą.
Kodowanie, edycja i tworzenie styli, for, stron, poszczególnych elementów - polecane szczególnie dla osób, które nie potrafią sobie poradzić z problemami.



Użytkownicy przeglądający ten wątek:

3 gości