CSS не будет выравнивать, где мне это нужно

0

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

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

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 пробелов, чтобы они отображались как "код".

Вот скриншот. Они находятся в правом верхнем углу. И вы также можете посмотреть живую версию здесь.

Теги:

1 ответ

1
Лучший ответ

просто добавьте float: left to rs div, вот так:

#rs{
    float: left;
}

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

Поделиться
  • 0
    блин, на 10 секунд раньше :(
  • 0
    : D иногда быть быстрым не плохо, IYKWIM.
Показать ещё 6 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню