Повернутый ввод текста HTML с помощью CSS Flexbox

На моей веб-странице есть ярлыки, расположенные по следующему шаблону: Основной контейнер content содержит rows. В строке есть два labels, а один label содержит три columns. Каждый column может содержать один или несколько элементов input["text"].

input {
    width: 100%;
    resize: vertical;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    border: none;                                       
    background-color: transparent;
    color: black;
    outline: none;
    font-weight: bold;
    transition: ease-in-out, width .35s ease-in-out;
}
                                                                                                                                    
input:hover, input:focus {                                                                                                                                                                                                                
    background-color: #baffc9;                                                                                                      
    border-radius: 3px;                                                                                                             
}                                                                                                                                                                                                                                                                                                                                                                                                                                 
                                                                                                                                    
.label-row {                                                                                                                        
    height: 3.0cm;                                                                                                                  
    width: 18.8cm;                                                                                                                  
    display: flex;                                                                                                                  
    flex-direction: row;                                                                                                            
    flex-grow: 0;                                                                                                                   
    flex-wrap: nowrap;                                                                                                              
}                                                                                                                                   
                                                                                                                                    
.label {                                                                                                                            
    border: 1px dashed black;                                                                                                       
    width: 9.4cm;                                                                                                                   
    display: flex;                                                                                                                  
    flex-direction: row;                                                                                                            
    flex-wrap: nowrap;                                                                                                              
}                                                                                                                                   
                                                                                                                                    
.col-left {                                                                                                                         
    width: 4.4cm;                                                                                                                   
}                                                                                                                                   
.col-middle {                                                                                                                       
    width: 1.0cm;                                                                                                                   
    border-left: 1px dotted black;                                                                                                  
    border-right: 1px dotted black;                                                                                                 
}                                                                                                                                   
.col-right {                                                                                                                        
    width: 4.0cm;                                                                                                                   
}           
                                                                       
/* ----- column-left ----- */                                                                                                       
.hsig-wrapper {                                                                                                                     
    flex-direction: column;                                                                                                         
    justify-content: space-evenly;                                                                                                  
}                                                                                                                                   
                                                                                                                                    
.hl {                                                                                                                               
    font-size: 10px;                                                                                                                
    flex: 0 1 auto;                                                                                                                 
}                                                                                                                                   
                                                                                                                                    
.sk {                                                                                                                               
    font-size: 18px;                                                                                                                
    flex: 0 1 auto;                                                                                                                 
}                                                                                                                                   
                                                                                                                                    
.format {                                                                                                                           
    font-size: 18px;                                                                                                                
    flex: 0 1 auto;                                                                                                                 
}                                                                                                                                   
                                                                                                                                    
.hsig {                                                                                                                             
    font-size: 18px;                                                                                                                
    flex: 0 1 auto;                                                                                                                 
}                                                                                                                                   
                                                                                                                                    
.sig_add {                                                                                                                          
    font-size: 10px;                                                                                                                
    flex: 0 1 auto;                                                                                                                 
}                                                                                                                                   
                                                                                                                                    
/* ----- column-middle ----- */                                                                                                     
.loc-wrapper {                                                                                                                      
    background-color: transparent;                                                                                                  
    width: 100%;                                                                                                                    
    height: 100%;                                                                                                                   
    display: flex;                                                                                                                  
    text-align: center;                                                                                                             
    justify-content: center;                                                                                                        
    align-items: center;                                                                                                            
}                                                                                                                                   
                                                                                                                                    
.loc {                                                                                                                              
    font-size: 20px;                                                                                                                
    width: 2.9cm;                                                                                                                   
    height: 0.9cm;                                                                                                                                                                                        
    -moz-transform:rotate(-90deg);                                                                                                  
    -webkit-transform: rotate(-90deg);                                                                                              
    -o-transform: rotate(-90deg);                                                                                                   
    -ms-transform: rotate(-90deg);                                                                                                  
}

/* ----- column-right ----- */                                                                                                      
.as-wrapper {                                                                                                                       
    width: 100%;                                                                                                                    
    height: 100%;                                                                                                                   
    display: flex;                                                                                                                  
    text-align: center;                                                                                                             
    justify-content: center;                                                                                                        
    flex-direction: row;                                                                                                            
    align-items: center;                                                                                                            
    /*flex-wrap: nowrap;*/                                                                                                          
    /*justify-content: space-evenly;*/                                                                                              
}                                                                                                                                   
                                                                                                                                    
.as_detail {                                                                                                                        
    font-size: 18px;                                                                                                                
    width: 100%;                                                                                                                    
    align-self: center;                                                                                                             
                                                                                                                                    
    flex: 0 1 auto;                                                                                                                 
    width: 0.8cm;                                                                                                                   
    /*height: 30%;*/                                                                                                                                                                                      
    -moz-transform:rotate(-90deg);                                                                                                  
    -webkit-transform: rotate(-90deg);                                                                                              
    -o-transform: rotate(-90deg);                                                                                                   
    -ms-transform: rotate(-90deg);
}

<div id = "content">

<div class = "label-row">

  <div class = "label">
    <div class = "col-left">
      <div class = "hsig-wrapper">
        <input type = "text" class = "hl"
                          id = "hl"
                          name = "hl"
                          value = "Headline">
        <input type = "text" class = "format"
                          id = "format"
                          name = "format"
                          value = "II">
        <input type = "text" class = "hsig"
                           id = "hsig"
                           name = "hsig"
                           value = "12 345">
        <input type = "text" class = "sig_add"
                           id = "sig_add"
                           name = "sig_add"
                           value = "Detail">
        </div>
      </div>
      <div class = "col-middle">
        <div class = "loc-wrapper"> 
          <input type = "text" class = "loc"
                             id = "loc"
                             name = "loc"
                             value = "ABC">
        </div>
      </div>
      <div class = "col-right">
        <div class = "as-wrapper">
          <input type = "text" class = "as_detail"
                             id = "as_detail_0"
                             name = "as_detail_0"
                             value = "1">
          <input type = "text" class = "as_detail"
                             id = "as_detail_1"                                                                                
                             name = "as_detail_1"
                             value = "2">
          <input type = "text" class = "as_detail"
                             id = "as_detail_2"
                             name = "as_detail_2"                                                                                
                             value = "3">
          <input type = "text" class = "as_detail"
                             id = "as_detail_3"
                             name = "as_detail_3"
                             value = "4">
        </div>
      </div>
    </div>

  </div> 
                                                                                              
</div>

На liveweave изображена почти вся проблема.

Эта проблема:

Единственный рабочий столбец - col-middle.
Слева игнорирует justify-content: space-evenly;. Поля ввода текста не используют нижнее пространство: мне не удалось подтолкнуть Detail к строке.
В правом столбце я мог вращать поля ввода, но их размер слишком мал. Я хотел выровнять их по центру этикетки (например, locABC), но они не сдвинутся вниз. Каждый раз, когда я пытался увеличить их ширину (с 0,8 см до 0,9 см), выравнивание нарушалось.

Что я могу сделать в таких случаях? Моя модель flexbox слишком сложна или даже построена совершенно неправильно? У тебя есть идея?

html css input flexbox css-transforms

15.09.2018 02:34

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

308

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Итак, я внес в ваш код следующие изменения:

Сделал hsig-wrapper полноразмерным Flexbox, и первый столбец отсортирован.
Элементы Flex сокращаться ровно настолько, насколько их содержимое min-width по умолчанию равно авто - поэтому установите min-width: 0 на элемент as_detail.

См. Демонстрацию ниже:

input {
  width: 100%;
  resize: vertical;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  border: none;
  background-color: transparent;
  color: black;
  outline: none;
  font-weight: bold;
  transition: ease-in-out, width .35s ease-in-out;
}

input:hover,
input:focus {
  background-color: #baffc9;
  border-radius: 3px;
}

.label-row {
  height: 3.0cm;
  width: 18.8cm;
  display: flex;
  flex-direction: row;
  flex-grow: 0;
  flex-wrap: nowrap;
}

.label {
  border: 1px dashed black;
  width: 9.4cm;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.col-left {
  width: 4.4cm;
}

.col-middle {
  width: 1.0cm;
  border-left: 1px dotted black;
  border-right: 1px dotted black;
}

.col-right {
  width: 4.0cm;
}


/* ----- column-left ----- */

.hsig-wrapper {
  display: flex; /* ADDED */
  height: 100%; /* ADDED */
  flex-direction: column;
  justify-content: space-evenly;
}

.hl {
  font-size: 10px;
  flex: 0 1 auto;
}

.sk {
  font-size: 18px;
  flex: 0 1 auto;
}

.format {
  font-size: 18px;
  flex: 0 1 auto;
}

.hsig {
  font-size: 18px;
  flex: 0 1 auto;
}

.sig_add {
  font-size: 10px;
  flex: 0 1 auto;
}


/* ----- column-middle ----- */

.loc-wrapper {
  background-color: transparent;
  width: 100%;
  height: 100%;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.loc {
  font-size: 20px;
  width: 2.9cm;
  height: 0.9cm;
  -moz-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
}


/* ----- column-right ----- */

.as-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  text-align: center;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  /*flex-wrap: nowrap;*/
  /*justify-content: space-evenly;*/
}

.as_detail {
  font-size: 18px;
  width: 100%;
  align-self: center;
  flex: 0 1 auto;
  width: 0.8cm;
  /*height: 30%;*/
  min-width: 0; /* ADDED */
  -moz-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
}

<div id = "content">

  <div class = "label-row">

    <div class = "label">
      <div class = "col-left">
        <div class = "hsig-wrapper">
          <input type = "text" class = "hl" id = "hl" name = "hl" value = "Headline">
          <input type = "text" class = "format" id = "format" name = "format" value = "II">
          <input type = "text" class = "hsig" id = "hsig" name = "hsig" value = "12 345">
          <input type = "text" class = "sig_add" id = "sig_add" name = "sig_add" value = "Detail">
        </div>
      </div>
      <div class = "col-middle">
        <div class = "loc-wrapper">
          <input type = "text" class = "loc" id = "loc" name = "loc" value = "ABC">
        </div>
      </div>
      <div class = "col-right">
        <div class = "as-wrapper">
          <input type = "text" class = "as_detail" id = "as_detail_0" name = "as_detail_0" value = "1">
          <input type = "text" class = "as_detail" id = "as_detail_1" name = "as_detail_1" value = "2">
          <input type = "text" class = "as_detail" id = "as_detail_2" name = "as_detail_2" value = "3">
          <input type = "text" class = "as_detail" id = "as_detail_3" name = "as_detail_3" value = "4">
        </div>
      </div>
    </div>

  </div>

</div>

вау, выглядит отлично :) спасибо! Именно так я хотел сделать col-left и почти то же, что имел в виду для col-right: идеальное выравнивание текста; есть ли у вас идеи, если значения as_detail будут длиннее 1 цифры, например Hand-1.2?

— 16.09.2018 22:02

пробовал использовать обертки для полей ввода as-detail - codepen.io/anon/pen/RYYqYX

— 17.09.2018 05:31

15.09.2018 08:31

input {
    width: 100%;
    resize: vertical;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    border: none;                                       
    background-color: transparent;
    color: black;
    outline: none;
    font-weight: bold;
    transition: ease-in-out, width .35s ease-in-out;
}
                                                                                                                                    
input:hover, input:focus {                                                                                                                                                                                                                
    background-color: #baffc9;                                                                                                      
    border-radius: 3px;                                                                                                             
}                                                                                                                                                                                                                                                                                                                                                                                                                                 
                                                                                                                                    
.label-row {                                                                                                                        
    height: 3.0cm;                                                                                                                  
    width: 18.8cm;                                                                                                                  
    display: flex;                                                                                                                  
    flex-direction: row;                                                                                                            
    flex-grow: 0;                                                                                                                   
    flex-wrap: nowrap;                                                                                                              
}                                                                                                                                   
                                                                                                                                    
.label {                                                                                                                            
    border: 1px dashed black;                                                                                                       
    width: 9.4cm;                                                                                                                   
    display: flex;                                                                                                                  
    flex-direction: row;                                                                                                            
    flex-wrap: nowrap;                                                                                                              
}                                                                                                                                   
                                                                                                                                    
.col-left {                                                                                                                         
    width: 4.4cm;                                                                                                                   
}                                                                                                                                   
.col-middle {                                                                                                                       
    width: 1.0cm;                                                                                                                   
    border-left: 1px dotted black;                                                                                                  
    border-right: 1px dotted black;                                                                                                 
}                                                                                                                                   
.col-right {                                                                                                                        
    width: 4.0cm;                                                                                                                   
}           
                                                                       
/* ----- column-left ----- */                                                                                                       
.hsig-wrapper {                                                                                                                     
    flex-direction: column;                                                                                                         
    justify-content: space-evenly;                                                                                                  
}                                                                                                                                   
                                                                                                                                    
.hl {                                                                                                                               
    font-size: 10px;                                                                                                                
    flex: 0 1 auto;                                                                                                                 
}                                                                                                                                   
                                                                                                                                    
.sk {                                                                                                                               
    font-size: 18px;                                                                                                                
    flex: 0 1 auto;                                                                                                                 
}                                                                                                                                   
                                                                                                                                    
.format {                                                                                                                           
    font-size: 18px;                                                                                                                
    flex: 0 1 auto;                                                                                                                 
}                                                                                                                                   
                                                                                                                                    
.hsig {                                                                                                                             
    font-size: 18px;                                                                                                                
    flex: 0 1 auto;                                                                                                                 
}                                                                                                                                   
                                                                                                                                    
.sig_add {                                                                                                                          
    font-size: 10px;                                                                                                                
    flex: 0 1 auto;                                                                                                                 
}                                                                                                                                   
                                                                                                                                    
/* ----- column-middle ----- */                                                                                                     
.loc-wrapper {                                                                                                                      
    background-color: transparent;                                                                                                  
    width: 100%;                                                                                                                    
    height: 100%;                                                                                                                   
    display: flex;                                                                                                                  
    text-align: center;                                                                                                             
    justify-content: center;                                                                                                        
    align-items: center;                                                                                                            
}                                                                                                                                   
                                                                                                                                    
.loc {                                                                                                                              
    font-size: 20px;                                                                                                                
    width: 2.9cm;                                                                                                                   
    height: 0.9cm;                                                                                                                                                                                        
    -moz-transform:rotate(-90deg);                                                                                                  
    -webkit-transform: rotate(-90deg);                                                                                              
    -o-transform: rotate(-90deg);                                                                                                   
    -ms-transform: rotate(-90deg);                                                                                                  
}

/* ----- column-right ----- */                                                                                                      
.as-wrapper {                                                                                                                       
    width: 100%;                                                                                                                    
    height: 100%;                                                                                                                   
    display: flex;                                                                                                                  
    text-align: center;                                                                                                             
    justify-content: center;                                                                                                        
    flex-direction: row;                                                                                                            
    align-items: center;                                                                                                            
    /*flex-wrap: nowrap;*/                                                                                                          
    /*justify-content: space-evenly;*/                                                                                              
}                                                                                                                                   
                                                                                                                                    
.as_detail {                                                                                                                        
    font-size: 18px;                                                                                                                
    width: 100%;                                                                                                                    
    align-self: center;                                                                                                             
                                                                                                                                    
    flex: 0 1 auto;                                                                                                                 
    width: 0.8cm;                                                                                                                   
    /*height: 30%;*/                                                                                                                                                                                      
    -moz-transform:rotate(-90deg);                                                                                                  
    -webkit-transform: rotate(-90deg);                                                                                              
    -o-transform: rotate(-90deg);                                                                                                   
    -ms-transform: rotate(-90deg);
}

<div id = "content">

<div class = "label-row">

  <div class = "label">
    <div class = "col-left">
      <div class = "hsig-wrapper">
        <input type = "text" class = "hl"
                          id = "hl"
                          name = "hl"
                          value = "Headline">
        <input type = "text" class = "format"
                          id = "format"
                          name = "format"
                          value = "II">
        <input type = "text" class = "hsig"
                           id = "hsig"
                           name = "hsig"
                           value = "12 345">
        <input type = "text" class = "sig_add"
                           id = "sig_add"
                           name = "sig_add"
                           value = "Detail">
        </div>
      </div>
      <div class = "col-middle">
        <div class = "loc-wrapper"> 
          <input type = "text" class = "loc"
                             id = "loc"
                             name = "loc"
                             value = "ABC">
        </div>
      </div>
      <div class = "col-right">
        <div class = "as-wrapper">
          <input type = "text" class = "as_detail"
                             id = "as_detail_0"
                             name = "as_detail_0"
                             value = "1">
          <input type = "text" class = "as_detail"
                             id = "as_detail_1"                                                                                
                             name = "as_detail_1"
                             value = "2">
          <input type = "text" class = "as_detail"
                             id = "as_detail_2"
                             name = "as_detail_2"                                                                                
                             value = "3">
          <input type = "text" class = "as_detail"
                             id = "as_detail_3"
                             name = "as_detail_3"
                             value = "4">
        </div>
      </div>
    </div>

  </div> 
                                                                                              
</div>

09.12.2020 10:35

Другие вопросы по теме

Bootstrap не загружается на angular 6

CSS отлично работает с HTML, но не с синтаксисом Razor

Bootstrap, как сохранить среднюю строку, всегда содержащуюся между строкой заголовка и строкой нижнего колонтитула

Может ли макет таблицы CSS обрабатывать недостающие ячейки?

VueJS - повернуть перед отображением элемента

Как уменьшить размер FontAwesome 5.3.1

Вертикально центр активного li в ul

Иконки не отображаются

Почему анимация не выполняется во Vue с использованием Animate.css

Элементы панели навигации скрываются автоматически

Повернутый ввод текста HTML с помощью CSS Flexbox

Ответы 2

Другие вопросы по теме

Похожие вопросы