Skip to content

Instantly share code, notes, and snippets.

@filaruina
Created August 13, 2013 19:58
Show Gist options
  • Save filaruina/6225051 to your computer and use it in GitHub Desktop.
Save filaruina/6225051 to your computer and use it in GitHub Desktop.
Untitled
*{margin:0;padding:0;box-sizing:border-box;}
body{padding:5px;}
li{list-style: none;}
.top_bar {
width: 700px;
height: 30px;
border: 1px solid #f00;
}
.bar_action {
background-color: #ccc;
border-radius: 5px 5px 0 0;
padding: 10px;
height: 100%;
float: left;
}
.bar_action ~ .bar_action {
margin-left: 1px;
}
.full_action {
width: 653px;
}
.btn_action {
width: 44px;
}
.flex {
display: -webkit-flex;
}
.flex .bar_action {
-webkit-box-flex: 1;
float: none;
}
.flex .full_action {
width: 100%;
}
ul {
overflow: hidden;
}
li {
float: left;
}
li ~ li {
margin-left: 15px;
}
Eu quero que isso (borda para visualizar o container)
<div class="top_bar v1">
<ul class="bar_action full_action">
<li>Do Something</li>
<li>Do Something</li>
<li>Do Something</li>
</ul>
<div class="bar_action btn_action">
Go!
</div>
</div>
<br/><br/>
Que funcione assim, com vários elementos podendo entrar e o primeiro sempre estando esticado
<div class="top_bar">
<ul class="bar_action full_action">
<li>Do Something</li>
<li>Do Something</li>
<li>Do Something</li>
</ul>
<div class="bar_action btn_action">
Go!
</div>
<div class="bar_action btn_action">
Go!
</div>
</div>
<br/><br/>
Tipo assim (usando flexbox, mas né, não posso usar flexbox T-T)
<div class="top_bar flex">
<ul class="bar_action full_action">
<li>Do Something</li>
<li>Do Something</li>
<li>Do Something</li>
</ul>
<div class="bar_action btn_action">
Go!
</div>
<div class="bar_action btn_action">
Go!
</div>
<div class="bar_action btn_action">
Go!
</div>
</div>
<br/><br/>
Esse caso também pode acontecer
<div class="top_bar flex">
<ul class="bar_action full_action">
<li>Do Something</li>
<li>Do Something</li>
<li>Do Something</li>
</ul>
</div>
// alert('Hello world!');
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment