Question

我正在尝试将始终的范围留在无序列表项中。下面的代码工作正常，直到我使浏览器宽度足够窄以强制列表项中的换行符 - 然后“日期”不再出现。我怎样才能让这个跨度始终首先出现？

<ul class="post-title">
<li> - this is the text. this is the text. this is the text.  <span style="float:left">the date</span>
</ul>

Answer 1

把跨度放在第一位

java.awt.IllegalComponentStateException: component must be showing on the screen to determine its location
    at java.awt.Component.getLocationOnScreen_NoTreeLock(Component.java:2062)
    at java.awt.Component.getLocationOnScreen(Component.java:2036)
    at javax.swing.text.JTextComponent$InputMethodRequestsHandler.getTextLocation(JTextComponent.java:4643)
    at sun.awt.im.InputMethodContext.getTextLocation(InputMethodContext.java:278)
    at sun.awt.windows.WInputMethod$1.run(WInputMethod.java:588)
    at java.awt.event.InvocationEvent.dispatch(InvocationEvent.java:311)
    at java.awt.EventQueue.dispatchEventImpl(EventQueue.java:756)
    at java.awt.EventQueue.access$500(EventQueue.java:97)
    at java.awt.EventQueue$3.run(EventQueue.java:709)
    at java.awt.EventQueue$3.run(EventQueue.java:703)
    at java.security.AccessController.doPrivileged(Native Method)
    at java.security.ProtectionDomain$JavaSecurityAccessImpl.doIntersectionPrivilege(ProtectionDomain.java:80)
    at java.security.ProtectionDomain$JavaSecurityAccessImpl.doIntersectionPrivilege(ProtectionDomain.java:90)
    at java.awt.EventQueue$4.run(EventQueue.java:731)
    at java.awt.EventQueue$4.run(EventQueue.java:729)
    at java.security.AccessController.doPrivileged(Native Method)
    at java.security.ProtectionDomain$JavaSecurityAccessImpl.doIntersectionPrivilege(ProtectionDomain.java:80)
    at java.awt.EventQueue.dispatchEvent(EventQueue.java:728)
    at org.netbeans.core.TimableEventQueue.dispatchEvent(TimableEventQueue.java:159)
[catch] at java.awt.EventDispatchThread.pumpOneEventForFilters(EventDispatchThread.java:201)
    at java.awt.EventDispatchThread.pumpEventsForFilter(EventDispatchThread.java:116)
    at java.awt.EventDispatchThread.pumpEventsForHierarchy(EventDispatchThread.java:105)
    at java.awt.EventDispatchThread.pumpEvents(EventDispatchThread.java:101)
    at java.awt.EventDispatchThread.pumpEvents(EventDispatchThread.java:93)
    at java.awt.EventDispatchThread.run(EventDispatchThread.java:82)

Answer 2

你可以将 - 这是文本.... 和日期括起来span。

<ul class="post-title">
  <li> 
      <span>the date</span>
      <span>- this is the text. this is the text. this is the text </span>  
  </li>
</ul>

以便始终首先显示日期。

无需style="float:left"。

Answer 3

我不知道是否有针对此的css解决方案但是如果你想使用 jquery 那么试试这个..

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="post-title">
<li> - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<span>the date</span></li>
</ul>

{{1}}

Answer 4

试试这个。

＆＃13;

li,ul{
                list-style: none;
                margin: 0;
                padding: 0;
                font-size: 20px
            }
            li{
                position: relative;
                text-indent: 70px;
            }
            span{
                position: absolute;
                background: red;
                left: 0;
                top: 0;
                width: 70px;
                text-indent: 0;
            }

＆＃13;

<ul class="post-title">
    <li> - this is the text. this is the text. this is the text.  <span>the date</span>
</ul>

＆＃13;

Answer 5

感谢您的所有帮助。在努力使CSS解决方案运作良好之后，我能够通过为插件创建自定义php模板来解决问题：https://github.com/picandocodigo/List-Category-Posts/tree/master/templates

浮动在无序列表项内的范围，即使换行也是如此

5 个答案: