【问题标题】:Float to left text in <li><li> 中的文本向左浮动
【发布时间】:2017-12-06 12:58:17
【问题描述】:

我在视图中有这段代码

  body .vr-list {
        padding: 0 20px !important;
        margin-top: 70px !important;
        text-align: left !important;
    }
  <ol class="vr-list" style="padding-left:540px;padding-top:10px;">
                <li style=" font-size: 1.6em;list-style: decimal-leading-zero;margin: 0 0 0 2em;"><span style="font-size: 0.95em;">Обзор существующих технологий  и применяемых api </span></li>
                <li style=" font-size: 1.6em;list-style: decimal-leading-zero;margin: 0 0 0 2em;"><span style="font-size: 0.95em;">Общие понятия WebGL</span></li>
                <li style=" font-size: 1.6em;list-style: decimal-leading-zero;margin: 0 0 0 2em;"><span style="font-size: 0.95em;">Интерактивный 3D rendering </span></li>
                <li style=" font-size: 1.6em;list-style: decimal-leading-zero;margin: 0 0 0 2em;"><span style="font-size: 0.95em;">Основные идеи виртуальной реальности</span></li>
                <li style=" font-size: 1.6em;list-style: decimal-leading-zero;margin: 0 0 0 2em;"><span style="font-size: 0.95em;">Интерактивность и FPS</span></li>
                <li style=" font-size: 1.6em;list-style: decimal-leading-zero;margin: 0 0 0 2em;"><span style="font-size: 0.95em;">FPS и частота обновления экрана </span></li>
                <li style=" font-size: 1.6em;list-style: decimal-leading-zero;margin: 0 0 0 2em;"><span style="font-size: 0.95em;">Процессорный цикл</span></li>
                <li style=" font-size: 1.6em;list-style: decimal-leading-zero;margin: 0 0 0 2em;"><span style="font-size: 0.95em;">Человеческий глаз против камеры </span></li>
                <li style=" font-size: 1.6em;list-style: decimal-leading-zero;margin: 0 0 0 2em;"><span style="font-size: 0.95em;">Построение базовой 3D сцены</span></li>
                <li style=" font-size: 1.6em;list-style: decimal-leading-zero;margin: 0 0 0 2em;"><span style="font-size: 0.95em;">Свет и rendering</span></li>
                <li style=" font-size: 1.6em;list-style: decimal-leading-zero;margin: 0 0 0 2em;"><span style="font-size: 0.95em;">История появления первой 3D модели</span></li>
                <li style=" font-size: 1.6em;list-style: decimal-leading-zero;margin: 0 0 0 2em;"><span style="font-size: 0.95em;">Баланс цвета и пропорции соотношения цветов. Работа с цветовыми кругами Джонаса Иттена </span></li>
                <li style=" font-size: 1.6em;list-style: decimal-leading-zero;margin: 0 0 0 2em;"><span style="font-size: 0.95em;">WebGL и three.js </span></li>
                <li style=" font-size: 1.6em;list-style: decimal-leading-zero;margin: 0 0 0 2em;"><span style="font-size: 0.95em;">Основы UI/UX дизайна для 3D сайтов</span></li>
                <li style=" font-size: 1.6em;list-style: decimal-leading-zero;margin: 0 0 0 2em;"><span style="font-size: 0.95em;">Oсновные ошибки при построении 3D сцен</span></li>
                <li style=" font-size: 1.6em;list-style: decimal-leading-zero;margin: 0 0 0 2em;"><span style="font-size: 0.95em;">Выпускной курсовой проект</span></li>

            </ol>

它显示列表但&lt;li&gt;标签内的文本居中

这是屏幕。

Screen

我怎样才能让它在左边不居中?

【问题讨论】:

  • 你试过 text-align:left!important;在
  • ?

标签: javascript jquery html css alignment


【解决方案1】:

您需要将text-align 样式应用于您的 li 元素(不仅仅是主 ul):

body .vr-list li {
    text-align: left !important;
}

【讨论】:

    【解决方案2】:

    当我运行你的代码时,文本对齐。我认为您在其他地方使用了.vr-list 类。所以,这种风格被覆盖了。 your code

    【讨论】:

      【解决方案3】:

      你使用内联样式而不是 css 有什么原因吗?

      尝试使用更具体的路径,例如

      body #content ol.vr-list li { text-align:left}

      某些东西明显覆盖了您的代码。我建议你不要使用 !important 。要么像我之前说的那样写一个更具体的路径,要么找到导致覆盖的代码并更改它

      我认为您在左侧列表或整个正文中都有一些text-aling:center!important。这可能会导致问题

      【讨论】:

      • 如果答案对你有用。将其评为已接受。很高兴我能帮上忙:D 干杯
      猜你喜欢
      相关资源
      最近更新 更多
      热门标签