Блог

Главная - Вопросы по программированию - добавление дробей в css

добавление дробей в css

#css #html

#css #HTML

Вопрос:

я пытаюсь добавить дроби с помощью css

 .top{border-bottom:solid black 1px; display:inline-block; float:left}
.bottom{ display:inline-block; clear:left; float:left}

чтобы они отображались в формате:

 1
-
x

http://jsfiddle.net/KVDS5/78/
это работает, но когда я пытаюсь добавить числа в уравнение по сторонам, оно просто перемещается в левую сторону, как я могу настроить css, чтобы это не влияло на порядок уравнения?

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

1. Разве это не эквивалентно 1 / x ?

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

3. CSS не предназначен для отображения математических выражений, рассмотрите возможность использования mathjax.org вместо этого

4. нет ли какого-нибудь простого решения для этого в css?

5. Вы используете тег шрифта, который устарел, также, если вы хотите использовать дробь, используйте border-bottom и это решит проблему

Ответ №1:

HTML:

 <span class="fraction">
    <span class="top">1</span>
    <span class="bottom">6</span>
</span>

CSS:

 .fraction {
    display: inline-block;
    text-align: center;
}
.fraction, .top, .bottom {
    padding-left: 2px;
    padding-right: 2px;
    font-size: 11px;
}
.bottom {
    border-top: 1px solid black;
    display: block;
}

Вот как я это сделал.
Демонстрация: http://jsfiddle.net/MarkkNijboer/yQm72/1 /

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

1. @atikot Это с большим числом сверху: jsfiddle.net/MarkkNijboer/yQm72/2

2. 1, просто предложение, использовать div для переноса вместо class, семантически имело бы смысл

3. @atikot Если это решение вашего вопроса, пожалуйста, отметьте его как таковой.

Метки: