Составьте список значений в соответствии с текстовой областью и метками - PullRequest
Новая
       45

Составьте список значений в соответствии с текстовой областью и метками

9 голосов
/ 15 ноября 2011

Вот некоторые CSS и HTML для создания текстовой области под списком точек данных: 

form label {
  width: 140px;
  float: left;
}
form ol li {
  background: #98c8dc;
  list-style: none;
  padding: 5px 10px;
}

<form>
<ol>
<li>
  <label><br/><br/><br/><br/>Recent data</label>
  <ol>
  <li>3 99</li>
  <li>5 98</li>
  <li>15 97</li>
  <li>28 96</li>
  </ol>
</li>
<li>
  <label>New data</label>
  <textarea placeholder="30 95" rows="4"></textarea>
</li>
</ol>
</form>

Это выглядит так:

enter image description here

Как бы вы порекомендовали, чтобы я выстроил его в линию? А именно, «Недавние данные» должны совпадать со строкой «28 96», и, возможно, самая хитрая, «30 95», несмотря на то, что находится в текстовой области, должна выстраиваться так, как будто это просто еще один ряд после «28 96» .

Ответы [ 8 ]

5 голосов
/ 16 ноября 2011

Вертикальное выравнивание не работает во встроенных элементах, но работает в таблицах ( больше подробностей о вертикальном выравнивании ).

Итак, вот решение: я просто обернул два основных элемента в первом li в строке таблицы и установил вертикальное выравнивание по низу, чтобы метка «недавние данные» опустилась вниз. (Может быть какой-то способ использовать свойство display для изменения li со встроенного элемента?)

Вам также нужно настроить отступы для тегов ol и label s и table, чтобы все выровнялось. В реальной жизни вы, вероятно, используете какой-то вид сброса css, чтобы нормализовать правила стиля по умолчанию для всех этих различных элементов, поэтому вам, возможно, придется сделать разные настройки, чтобы все выровнялось идеально, но вот что я придумал.

Altogether now

Всего сейчас: 

<style>
table,tbody,tfoot,thead,tr,th,td {
   margin:0;
   padding:0;
   border:0;
   outline:0;
   font-size:100%;
   vertical-align:baseline;
   background:transparent}
body{line-height:1}
ol,ul{list-style:none}
table {border-spacing: 0px;}
table td{
  vertical-align: bottom;
}

* {
  font-size: 14px;
  font-family: Times New Roman, serif;
} 
form label {
  width: 140px;
  float: left;
} 
form ol li {
  background: #98c8dc;
  list-style: none;
  padding: 5px;
  margin-bottom: 2px;
} 
form ol li:last-child {
  margin-bottom: 0px;
}
form li label{
  padding: 4px 0 4px 0;
} 
</style>

<form>
<ol>
<li>
<table><tr><td>
  <label>Recent data</label>
</td><td>
  <ol>
  <li>3 99</li>
  <li>5 98</li>
  <li>15 97</li>
  <li>28 96</li>
  </ol>
</td>
</tr></table>
</li>
<li>
  <label>New data</label>
  <textarea placeholder="30 95" rows="4"></textarea>
</li>
</ol>
</form>
3 голосов
/ 23 ноября 2011

Если вы хотите, чтобы материал вел себя как таблица, отобразите ее как таблицу. Используйте CSS table, table-row и table-cell для свойства display элементов. Затем вы можете использовать вертикальное выравнивание и другие «только» таблицы. Обратите внимание, что я использовал > для селекторов CSS, поэтому внутренние списки также не получают эти стили.

http://jsfiddle.net/nQWBw/2/

CSS: 

.table-like {
    display: table;
    border: 1px solid red;
    background: #98c8dc;
    margin: 0;
    padding: 0;
}
.table-like > LI {
    display: table-row;
    border: 1px solid lime;
    list-style: none;
    margin: 0;
    padding: 0;
}
.table-like > LI > LABEL ,
.table-like > LI > OL ,
.table-like > LI > TEXTAREA {
    display: table-cell;
    border: 1px dashed magenta;
    /* padding: 5px 10px; */
    vertical-align: top;
}
.table-like LI:first-child > *{
    vertical-align: bottom;
}
.table-like > LI > OL > LI {
    display: block;
    margin: 0;
    padding: 0;
}

HTML: 

<form>
    <ol class="table-like">
        <li>
            <label>Recent data</label>
            <ol>
                <li>3 99</li>
                <li>5 98</li>
                <li>15 97</li>
                <li>28 96</li>
            </ol>
        </li>
        <li>
          <label>New data</label>
          <textarea placeholder="30 95" rows="4"></textarea>
        </li>
    </ol>
</form>
3 голосов
/ 20 ноября 2011

Это хороший пример позиционирования CSS. Элементы с position:absolute расположены относительно их ближайшего позиционированного родителя. Это означает, что мы можем прикрепить ярлыки к верху / левому краю их контейнеров, используя position:relative на <ol> и position:absolute на ярлыке.

Пример здесь: http://jsfiddle.net/YhQYS/1/

HTML 

<form action="." method="post">
    <ol>
        <li class="recent-data">
          <strong>Recent data</strong>
          <ol>
              <li>3 99</li>
              <li>5 98</li>
              <li>15 97</li>
              <li>28 96</li>
          </ol>
        </li>
        <li class="new-data">
          <label>New data</label>
          <textarea placeholder="30 95" rows="4"></textarea>
        </li>
    </ol>
</form>

CSS 

form > ol {
    background: #98c8dc;
    font-family: serif;
}
.recent-data > ol,
.new-data > ol {
    list-style: none;
    padding: 5px 10px 5px 0;
    line-height:20px;
}
.recent-data li { padding-left:5px; }
.recent-data,
.new-data {
    position:relative;
    padding-left:140px;
}
.recent-data strong,
.new-data label {
    position:absolute;
    left:10px;
    line-height:20px;
}
.recent-data strong { bottom:5px; }
.new-data label { top:5px; }
.new-data textarea {
    font-family:serif;
    font-size:100%;
    padding:4px;
}

Это очень простой и надежный кросс-браузер. Обратите внимание, что вы не должны использовать <label>, который не имеет соответствующего элемента управления формы.

Но эти вещи выглядят как табличные данные ... это ваш выбор, у нас недостаточно контекста, чтобы узнать, какая разметка более подходящая. Итак, вот более семантически правильный подход с использованием таблиц rowspan и vertical-align:

HTML 

<form action="." method="post">
    <table id="results">
        <tbody>
            <tr>
                <th rowspan="4" scope="row" class="recent-label">Recent data</th>
                <td>2</td>
                <td>47</td>
            </tr>
            <tr>
                <td>3</td>
                <td>99</td>
            </tr>
            <tr>
                <td>5</td>
                <td>98</td>
            </tr>
            <tr>
                <td>5</td>
                <td>98</td>
            </tr>
            <tr>
                <th rowspan="1" scope="row" class="new-label">New data</th>
                <td colspan="2" class="new-data">
                    <textarea>23</textarea>
                </td>
            </tr>
        </tbody>
    </table>
</form>

CSS 

form {
    background: #98c8dc;
    font-family: serif;
}
#results th,
#results td {
    padding:3px 5px;
}

#results .recent-label {
    vertical-align:bottom;
}
#results .new-label {
    vertical-align:top;
}
#results .new-data {
    padding-left:0px;
}
#results textarea {
    padding:4px; // +1px border
    font-size:100%;
    font-family:serif;
}

Образец в http://jsfiddle.net/quqf8/1/

2 голосов
/ 22 ноября 2011

Попробуйте это: используя некоторые position: reltive;, вы можете все это выстроить в линию. 

<html>
<head>
<style type="text/css">
form {
background: #98c8dc;
padding: 5px 10px;
}
form label {
width: 140px;
float: left;
position: relative;
bottom: 20px;
display: block;
}
form label span {
display: block;
}
form ol li {
display: table-row;
list-style: none;
}
#area {
position: relative;
right: 5px;
}
</style>
</head>
<body>
<form>
<label>&nbsp;</label>
<ol>
<li>3 99</li>
<li>5 98</li>
<li>15 97</li>
<li>28 96</li>
</ol>
<label><span>Recent data</span>New data</label>
<textarea id="area" placeholder="30 95" rows="4"></textarea>
</li>
</ol>
</form>
</body>
</html>

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

2 голосов
/ 18 ноября 2011

вот решение. no table, no jquery, просто добавьте один тег p в первый lable

Демонстрация в скрипке

Протестировано в Safari 15, Firefox 6 и ie8.

Я думаю, вы должны установить line-weigh для caculate. Например, я установил 18px так, чтобы вся высота в <ol><li>3 99...</ol> была (18+5+5)*4=112px (два 5px для вашей li: высота отступа), а затем добавил один тег p, легкий для элемента управления position.

HTML часть: 

<form>
<ol>
<li>
    <label><p>Recent data</p></label>
  <ol>
  <li>3 99</li>
  <li>5 98</li>
  <li>15 97</li>
  <li>28 96</li>
  </ol>
</li>
<li>
  <label>New data</label>
  <textarea placeholder="30 95" rows="4"></textarea>
</li>
</ol>
</form>

CSS-часть: 

form{font:14px/18px arial;}

form label {
  width: 140px;
  float: left;  
}
form>ol>li>label {
     height: 112px; 
     position:relative;
}
form>ol>li>label>p {
    position:absolute;
    bottom:5px;  /* 5px for the last li(28.96) padding-bottom:5px   */
    left:0;
}
form ol li {
  background: #98c8dc;
  list-style: none;
  padding: 5px 10px;
}
2 голосов
/ 15 ноября 2011

Удалите границу и отступы из textarea и установите для него тот же шрифт.

Грубо говоря, http://jsfiddle.net/vP7As/1/

1 голос
/ 23 ноября 2011

Вертикальное выравнивание работает с inline-block элементами
http://jsfiddle.net/s3ayp/

<!-- HTML -->
<form>
  <ol>
    <li class="lineup lineup-bottom">
      <label >Recent data</label>
      <ol>
        <li class="first">3 99</li>
        <li>5 98</li>
        <li>15 97</li>
        <li class="last">28 96</li>
      </ol>
    </li>
    <li class="lineup lineup-top">
      <label>New data</label>
      <ol>
        <li>
          <textarea placeholder="30 95" rows="4"></textarea>
        </li>
      </ol>
    </li>
  </ol>
</form>

 /* CSS */
.lineup > * {
    display: -moz-inline-box; /* FF 2 */
    display: inline-block;
}
*:first-child + html .lineup > * { /* IE7 hack */
    display: inline;
}

.lineup.lineup-top > * {
    vertical-align: top;
}

.lineup.lineup-bottom > * {
    vertical-align: bottom;
}
form label {
    width: 140px;
    vertical-align: bottom;
}
ol {
    background: #98c8dc;
    list-style: none;
}
ol li {
    padding: 5px 10px;
}
ol li.first {
    padding-top: 0
}
ol li.last {
    padding-bottom: 0
}
0 голосов
/ 17 ноября 2011

Некоторые JQuery

Вы можете динамически устанавливать заполнение меток с помощью jquery, используя номер элемента списка.

http://jsfiddle.net/uSehQ/2/

<script type="text/javascript">
$(document).ready(function() {
    var size = $("#data").children().size();
    var top = 5+30*(size-1);
    $("#label").css("padding", top+"px 0 0 0")
});
</script>
<style>
form label {
  width: 140px;
  float: left;
}
form ol li {
  background: #98c8dc;
  list-style: none;
  padding: 5px 10px;
}
</style>
<form>
<ol>
<li>
  <label id="label">Recent data</label>
  <ol id="data">
  <li>3 99</li>
  <li>5 98</li>
  <li>15 97</li>
  <li>20 25</li>
  <li>30 95</li>
  </ol>
</li>
<li>
  <label>New data</label>
  <textarea placeholder="40 76" rows="4"></textarea>
</li>
</ol>
</form>
...