Блог

Главная - Вопросы по программированию - Как задать числа для вертикальной линии в HTML и CSS

Как задать числа для вертикальной линии в HTML и CSS

#javascript #html #css

Вопрос:

Я хочу создать линию, похожую на ось Y, в HTML и CSS. Я хочу, чтобы эта линия выглядела только как ось Y.

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

 #mySpan{
  writing-mode: vertical-lr; 
  transform: rotate(180deg);
} 
 <table >
    <tr>
    <td><span style="writing-mode: vertical-lr; 
        transform: rotate(180deg);"> <b>Secondary Axis</b></span></td>
    <td>
    <ul>
    <br><br><br>
        <li>3</li><br><br><br><br>
        <li>2</li><br><br><br><br>
        <li>1</li><br><br><br><br>
        <li> 0</li><br><br><br><br>
        </ul>
    </td>
    <td> 
        <div  style="border-left: 1px solid black; height:250px;position:left;left: 50%;">            
        </div> 
     </td>


    </tr>
</table>

Также он занимает место в верхней или нижней части. Может быть, это потому, что я использовал br тег.

Кто-нибудь подсказывает, какие изменения/модификации мне нужно сделать, чтобы это выглядело как ось Y.

Спасибо

Ответ №1:

Вот способ, которым вы можете его создать, используйте display: flex; на родителе, чтобы сделать ребенка гибким

flex-direction: column; чтобы показать элементы в столбце, если вы этого не сделаете, элементы будут отображаться в одной строке, например X asix.

justify-content: space-between; чтобы разделить равный промежуток между предметами

Примечание: Вы можете увеличивать и уменьшать числа в LI, они будут автоматически настраиваться.

 .wrapper {display: flex;}
ul {list-style:none; height: 250px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid; }
li {
text-align:right;
position: relative;
padding-right: 5px;
}
li:after {
content: "-";
position: absolute;
top: 50%;
right: 0;
transform: translate(60%, -50%);
} 
 <div class="wrapper">
<ul>
  <li>0.0005</li>
  <li>13</li>
  <li>12.44</li>
  
  <li>1</li>
  <li>.100</li>
</ul>
</div>

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

1. Это прекрасно работает в соответствии с моими требованиями. У меня есть несколько глупых вопросов. 1. Для более чем 2 цифр он перекрывается с «-«. 2. Возможно ли динамически создавать «li» в соответствии с входными данными. Это может быть глупый вопрос, но я новичок в FE . Спасибо

2. Я не получил ваш 2-й пункт, можно ли динамически создавать «li» в соответствии с вводом

3. исправлено на 1-й пункт, если это вам поможет , не забудьте отметить это как правильный ответ

4. возможно ли , что если я передал 4 элемента, то он должен создать 4 тега <li>, если 3, то 3 тега <li><li>. Надеюсь, теперь мне все ясно.

5. Да, второй пункт работает. Не могли бы вы также проверить наличие 4-5 цифр. потому что некоторое время значения могут быть 0,0005 ,0,045 и т.д., Тогда они будут перекрываться.

Ответ №2:

Я думаю, что в вашем коде много ошибок.. Проблема с пространством заключается в том, что ваш
Вторая проблема заключается в том, что вы использовали вертикальную линию в качестве div со стилем высоты (вы можете увеличить размер на 250 пикселей (чтобы поймать
добавленное вами))

в строке кнопки, если вы планируете использовать это для добавления формулы или чего-то еще, это не будет работать для вас.

начните с html-холста или svg

Ответ №3:

 ul {
  list-style:none;
  border-right: 1px solid;
  width: 20px;
}

li {
  margin-bottom: 125px
}

li:after {
  content: "-";
  padding-left: 9px;
} 
 <ul>
  <li>3</li>
  <li>2</li>
  <li>1</li>
  <li>0</li>
</ul>

Ответ №4:

Вы можете использовать псевдоэлементы и счетчики CSS

 *{
  box-sizing: border-box;
  padding: 0;
  margin:0;
}
body{padding: 6rem}
ul{
    position: relative;
    counter-reset: timeline-counter -1;
    border-left: 1px solid black; 
    
    transform: scale(-1) rotateY(180deg);
}

ul li{
    position: relative;
    counter-increment: timeline-counter; 
    height: 32px;
    color: white;
    background-color: grey;
    margin-bottom: 1rem; 
    list-style: none;
    transform:rotateX(180deg);
    line-height: 32px;
    padding-left: 1rem
} 

ul li:before { 
    content: "0" counter(timeline-counter); 
    position: absolute;
    top: 8px; 
    left: -32px;
    font-size: 1rem;
    color: black;
    line-height: 1;
}
ul li:after {
    content: "";
    --height-lenght: 1px;
    position: absolute;
    top: calc(50% - var(--height-lenght));
    left: -6px;
    width: 12px;
    height: var(--height-lenght);
    background-color: hsl(0deg 0% 0%);
} 
 <ul>
  <li>Line 1</li>
  <li>Line 2</li>
  <li>Line 3</li>
  <li>Line 4</li>
  <li>Line 5</li>
  <li>Line 6</li>
</ul>

Или с помощью гибкой коробки

     *{
      box-sizing: border-box;
      padding: 0;
      margin:0;
    }
    body{padding: 6rem}
    ul{
        position: relative;
        counter-reset: timeline-counter -1;
        border-left: 1px solid black;  
        flex-direction: column-reverse;
        display: flex;
    }

    ul li{
        position: relative;
        counter-increment: timeline-counter; 
        height: 32px;
        color: white;
        background-color: grey;
        margin-bottom: 1rem; 
        list-style: none; 
        padding-left: 1rem; 
        line-height: 32px;
    } 

    ul li:before { 
        content: "0" counter(timeline-counter); 
        position: absolute;
        top: 8px; 
        left: -32px;
        font-size: 1rem;
        color: black;
        line-height: 1;
    }
    ul li:after {
        content: "";
        --height-lenght: 1px;
        position: absolute;
        top: calc(50% - var(--height-lenght));
        left: -6px;
        width: 12px;
        height: var(--height-lenght);
        background-color: hsl(0deg 0% 0%);
    } 
 <ul>
  <li>Line 1</li>
  <li>Line 2</li>
  <li>Line 3</li>
</ul>

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

1. @Glidas. Тамбо, когда браузер увеличивает/уменьшает масштаб, вертикальная линия также уменьшается и увеличивается. Я хочу, чтобы высота линии была фиксированной. Какие изменения мне нужны в приведенном выше коде. Пожалуйста, предложите

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

3. Я использую chrome версии 90.0.4430.93. и оба ведут себя одинаково. Я также попробовал firefox 88.0.1, но та же проблема

4. Очень странное у тебя <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0"> в голове? У меня та же версия, но у меня нет этой проблемы. Если возможно, поделитесь со мной своим экраном.

5. Я понял. когда я увеличиваю/уменьшаю масштаб, моя таблица корректируется, и, соответственно, эта вертикальная линия также корректируется. Мне нужно посмотреть на эту корректировку таблицы. Можем ли мы четко указать высоту этой вертикальной линии ?

Метки: