2013-11-09 3 views
0

так что у меня есть мой код и те же цветные пузырьки, которые не совпадают с панелью инструментов, включая весь код. кроме javascript, поскольку я не думаю, что это необходимо.CSS не будет выравниваться там, где он мне нужен

Его простое приложение для рисования, и мне нужны те же «цветные пузыри», которые должны быть на панели инструментов , и они как бы свисают вниз. Пожалуйста, помогите мне!

HTML КОД:

<html> 
    <head> 
     <title>Project - Draw</title> 
    <link rel="stylesheet" href="drawstyle.css"> 
    </head> 

    <body style='margin:0'> 
    <div id="toolbox"> 
    <div id="rs"> 
     Radius <span id="rsvalue">10</span> 
     <div id="decrs" class="rscontrol">-</div> 
     <div id="incrs" class="rscontrol">+</div> 
    </div> 
     <div id="colors"> 
     <div class="swatch active"></div> 
     <div class="swatch"></div> 
     <div class="swatch"></div> 
     </div> 
    </div> 
     <canvas id="canvas" style="display: block;"> 
    Your browser dose not support this application. Get Chrome!!! :(
    </canvas> 
    <script src="draw.js"></script> 
    <script src="radius.js"></script> 
    </body> 

** CSS КОД: **

 *{ 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    font-family: sans-serif; 

    user-select: none; 
    -moz-user-select: none; 
    -webkit-user-select: none; 
    -ms-user-select: none; 
     } 

     #toolbox { 
     width: 100%; 
     height: 50px; 
     padding: 10px; 
     position: fixed; 
     top: 0; 
     background-color: #2B2B2B; 
     color: #D4D4D4; 
     } 

     .rscontrol { 
     width: 30px; 
     height: 30px; 
     background-color: #9E9E9E; 
     display: inline-block; 
     text-align: center; 
     padding: 5px; 
     } 

     #rscontrol { 
     float: left; 
     } 

     #colors { 
     float: right; 
     } 

     .swatch { 
     width: 30px; 
     height: 30px; 
     border-radius: 10px; 
     box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 2px 2px 
     rgba(0, 0, 0, 0.5); 
     display: inline-block; 
     margin-left: 10px; 
     } 

Я знаю, что его не все выровнена^CSS^но в моей версии я просто должен сделать 8 пробелов, чтобы заставить его отображаться как «код».

Here is a screenshot. Они находятся в правом верхнем углу. И вы также можете see a live version here.

ответ

1

просто добавить float: left к rs DIV, например:

#rs{ 
    float: left; 
} 

Пример на скрипку:http://jsfiddle.net/SWRaA/

+0

проклятое, 10 секунд ранее :( – nkmol

+0

: D иногда быть быстро не плохо, IYKWIM. – BeNdErR

+0

+1 для этого!: D – nkmol

Смежные вопросы