Выравнивание двух объектов HTML рядом - PullRequest
Новая
       13

Выравнивание двух объектов HTML рядом

0 голосов
/ 26 мая 2019

У меня есть поле цвета и немного текста.Я пытаюсь выровнять прямоугольник точно слева от текста.У меня есть проблемы, пытаясь выровнять его правильно.

Я пытался просмотреть другие записи о переполнении стека и пытался использовать свойство float, но не смог выровнять их правильно, потому что текст слишком далеко направо при использовании свойства float.Вот ссылка jsfiddle, если кто-то хочет запустить код: https://jsfiddle.net/1qgep5tn/4/

<!DOCTYPE html>

<html>
<head>

<style>

  .box {
    width: 20px;
    height: 20px;
   }

  .boxColor {
      background: #1c5a7d;
  }

    #right{
      float: right;
    }

    #left{
      float: left;
    } 

</style>

</head>
<body>

<div class="box boxColor" ></div>       
   Header:
     <br>
          <input type="text" name="firstname"  value="">
     <br>

</body>
</html>

Я ожидаю, что поле будет выровнено по левому краю текста, но оно появляется над текстом.Вот изображение того, как это выглядит прямо сейчас:

enter image description here

Ответы [ 2 ]

1 голос
/ 26 мая 2019

С этим HTML у вас будет много проблем с выравниванием элементов по вашему желанию.Это связано с тем, что нет основного контейнера, охватывающего весь текстовый контент.Сначала я бы предложил обернуть текстовое содержимое в другой контейнер и использовать метку для ввода, например: 

<div class="box boxColor"></div>
<div class="box boxText">
    <label for="firstname">
        <span>Header</span>
        <input type="text" name="firstname" id="firstname"
                value="">
    </label>
 </div>

С этой структурой вы можете лучше применить стилизацию: 

body {
    display: flex;
    flex-direction: row;
}
label > span {
    display: block
}
label > span::after {
    content: ":";
}
.box {
    /* whatever shared styles you might want... */
}
.boxColor {
    background-color: #1c5a7d;
    height: 20px;
    width: 20px;
}
.boxText {
    flex-grow: 1
}
1 голос
/ 26 мая 2019

JSFiddle выглядит иначе, чем у вас, если только он не отредактирован. измените заголовок <div> на <p> и убедитесь, что он рядом с полем, например: 

<div class="google_map">
    <div class="box blueish"></div>
    <p class="paragraph">Header:</p>
  </div>

и используйте display: inline-block в обоих классах paragraph и box.

...