Блог

Главная - Вопросы по программированию - CSS Использует сетку и гибкий интерфейс одновременно

CSS Использует сетку и гибкий интерфейс одновременно

#html #css

Вопрос:

У меня проблема. CSS-не моя любимая часть программирования, и я не могу этого понять. Мне нужен следующий результат: введите описание изображения здесь

Но вот что у меня есть сейчас:

 #newOrderControl {
    border-style: solid;
    border-color: black;
    border-width: 1px;
    width: min-content;
    font-size: 14px;
}

#newOrderInputFields {
    display: grid;
    grid-template-columns: auto auto auto auto;
    column-gap: 40px;
}

#newOrderInputFields .inputField {
    display: flex;
    align-items: center;
    flex-direction: row;
}

#newOrderInputFields label {
    width: auto;
}




#newOrderButtons button {
    float: right;
    border-style: solid;
    border-color: black;
    border-width: 2px;
    color: white;
    height: 30px;
    width: auto;
    padding: 0px 15px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    border-radius: 10px;
    margin: 0px 5px;
}

.btnAll {
    background-color: #6DA0ED;
    border-style: solid;
    border-color: black;
    border-width: 1px;
    color: white;
    border-radius: 5px;
}

#btnTakeProfit {
    background-color: #33AB37;
}

#btnPlaceOrder {
    background-color: #6DA0ED;
}

.title {
    display: block;
    text-align: center;
    color: #1D0F73;
    font-size: 22px;
    font-weight: bold;
    margin: 5px;
} 
 <div id="newOrderControl">
    <label class="title">New order</label>
    <div id="newOrderInputFields">
        <div class="inputField">
            <label>Action:</label>
            <select id="txtOrderAction">
                <option value="">-</option>
                <option value="Buy">Buy</option>
                <option value="Sell">Sell</option>
            </select>
        </div>
        <div class="inputField">
            <label>Quantity:</label>
            <div>
                <input type="text" id="txtOrderQuantity">
                <button class="btnAll" onclick="setAllQuantity()">All</button>
            </div>
        </div>
        <div class="inputField">
            <label>Target price:</label>
            <input type="text" id="txtOrderTargetPrice">
        </div>
        <div class="inputField">
            <label>Target perc:</label>
            <input type="text" id="txtOrderTargetPerc">
        </div>
        <div class="inputField">
            <label>Coin:</label>
            <select id="txtOrderCoin">
                <option value="">-</option>
            </select>
        </div>
        <div class="inputField">
            <label>Amount:</label>
            <div>
                <input type="text" id="txtOrderAmount">
                <button class="btnAll" onclick="setAllAmount()">All</button>
            </div>
        </div>
        <div class="inputField">
            <label>Limit price:</label>
            <input type="text" id="txtOrderLimitPrice">
        </div>
        <div class="inputField">
            <label>Limit perc:</label>
            <input type="text" id="txtOrderLimitPerc">
        </div>
    </div>
    <div id="newOrderButtons">
        <button id="btnTakeProfit">Take profit</button>
        <button id="btnPlaceOrder">Place order</button>
    </div>
</div>

С этим кодом у меня в настоящее время возникают следующие проблемы:

  • Моя All кнопка не находится рядом с полем ввода
  • 2 кнопки ниже находятся за пределами newOrderControl div
  • Они labels переносятся на следующую строку
  • Все входные данные и метки должны быть выровнены друг под другом, как в сетке

Сейчас я попытался изменить его на а grid , но тогда я боролся с тем input и button тем, что находятся рядом друг с другом. Поэтому я завернул их в div , но потом они полностью исчезли.

Что мне нужно сделать, чтобы получить результат?

Ответ №1:

(1) Удаление оболочки <div> в приведенном ниже коде автоматически выровняет ввод и кнопки с помощью flexbox.

 <div>
    <input type="text" id="txtOrderQuantity">
    <button class="btnAll" onclick="setAllQuantity()">All</button>
</div>

(2) Первое правило: не используйте float для макета.

Я добавил:

 #newOrderControl {
  display: flex;
  flex-direction: column;

Чтобы кнопки можно было выровнять справа с помощью

 #newOrderInputFields label {
  width: auto;
}

(3) Нанесение flex-shrink: 0; <label> предотвратит обертывание. Я изменил width размер контейнера на width: max-content; и уменьшил gap , чтобы компенсировать это.

(4) добавлено justify-content: flex-end; для их выравнивания:

 #newOrderInputFields .inputField {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
 
 #newOrderControl {
  display: flex;
  align-items: center;
  flex-direction: column;
  border-style: solid;
  border-color: black;
  border-width: 1px;
  width: max-content;
  font-size: 14px;
}

#newOrderInputFields {
  display: grid;
  grid-template-columns: auto auto auto auto;
  column-gap: 5px;
}

#newOrderInputFields .inputField {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

#newOrderInputFields label {
  width: auto;
  flex-shrink: 0;
}

#newOrderButtons {
  align-self: flex-end;
}

#newOrderButtons button {
  float: right;
  border-style: solid;
  border-color: black;
  border-width: 2px;
  color: white;
  height: 30px;
  width: auto;
  padding: 0px 15px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  border-radius: 10px;
  margin: 0px 5px;
}

.btnAll {
  background-color: #6DA0ED;
  border-style: solid;
  border-color: black;
  border-width: 1px;
  color: white;
  border-radius: 5px;
}

#btnTakeProfit {
  background-color: #33AB37;
}

#btnPlaceOrder {
  background-color: #6DA0ED;
}

.title {
  display: block;
  text-align: center;
  color: #1D0F73;
  font-size: 22px;
  font-weight: bold;
  margin: 5px;
} 
 <div id="newOrderControl">
  <label class="title">New order</label>
  <div id="newOrderInputFields">
    <div class="inputField">
      <label>Action:</label>
      <select id="txtOrderAction">
        <option value="">-</option>
        <option value="Buy">Buy</option>
        <option value="Sell">Sell</option>
      </select>
    </div>
    <div class="inputField">
      <label>Quantity:</label>
      <input type="text" id="txtOrderQuantity">
      <button class="btnAll" onclick="setAllQuantity()">All</button>
    </div>
    <div class="inputField">
      <label>Target price:</label>
      <input type="text" id="txtOrderTargetPrice">
    </div>
    <div class="inputField">
      <label>Target perc:</label>
      <input type="text" id="txtOrderTargetPerc">
    </div>
    <div class="inputField">
      <label>Coin:</label>
      <select id="txtOrderCoin">
        <option value="">-</option>
      </select>
    </div>
    <div class="inputField">
      <label>Amount:</label>
      <input type="text" id="txtOrderAmount">
      <button class="btnAll" onclick="setAllAmount()">All</button>
    </div>
    <div class="inputField">
      <label>Limit price:</label>
      <input type="text" id="txtOrderLimitPrice">
    </div>
    <div class="inputField">
      <label>Limit perc:</label>
      <input type="text" id="txtOrderLimitPerc">
    </div>
  </div>
  <div id="newOrderButtons">
    <button id="btnTakeProfit">Take profit</button>
    <button id="btnPlaceOrder">Place order</button>
  </div>
</div>

Комментарии:

1. Да, теперь кнопки находятся рядом друг с другом! Как я могу запретить метке переходить в следующую строку? И действие и ввод монет не выровнены друг под другом. Они начинаются/останавливаются в разных точках

2. @A. Вресвейк flex-shrink: 0;

3. Но тогда последние входные файлы выходят за пределы границы div?

4. @A. Vreeswijk просто не хватает места для всего, вы хотите увеличить размер контейнера или уменьшить размер чего-то еще, например входных данных?

5. Ладно, подожди. Я обновлю свой код тем, что у меня есть сейчас!

Метки: