Question

为了获得我想要的东西，我需要制作另一个ul元素，还是可以用一个？

代码如下：

HTML

<body>
    <p>
        <b>text</b>text<br /> 
        <b>text</b>text<br />               
        <b>text</b>text<br /> 
        <b>text</b>
    </p>
    <ul>
        <li>text</li>
        <li>text</li>
        <li>text</li>
   </ul>
   <p>
       <b>text</b>text<br /> 
       <b>text</b>text<br />                
       <b>text</b>text<br /> 
       <b>text</b>
   </p>
   <ul>
       <li>text</li>
       <li>text</li>
   </ul>
</body>

Answer 1

只需使用html。

<p>
    <b>text</b>text<br /> 
    <b>text</b>text<br />               
    <b>text</b>text<br /> 
    <b>text</b>
</p>
    <li>text</li>
    <li>text</li>
    <li>text</li>
<p>
   <b>text</b>text<br /> 
   <b>text</b>text<br />                
   <b>text</b>text<br /> 
   <b>text</b>
</p>
   <li>text</li>
   <li>text</li>

和CSS。

p {
    text-align: left;
    margin:50px;
    line-height:15px;
}
body {
    margin: 0;
    padding: 0;
    text-align: center;
    font-family: Verdana, Arial, sans-serif;
    font-size: 12px;
    color: black;
    background: white;
    width:100%; 
}

li{
   text-align:right;

}

Answer 2

也许这适合你：

将您的ul包裹在div中：

  <div class="list">
    <ul>
      <li>text</li>
      <li>text</li>
    </ul>
  </div>

并在CSS中：

.list {
  text-align: right;
  margin-right: 50px;
}
ul {
  display: inline-block;
}

下面给出的片段：

p {
  text-align: left;
  margin: 50px;
  line-height: 15px;
}
.list {
  text-align: right;
  margin-right: 50px;
}
ul {
  display: inline-block;
}
body {
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
  color: black;
  background: white;
  width: 100%;
}

<body>
  <p>
    <b>text</b>text
    <br />
    <b>text</b>text
    <br />
    <b>text</b>text
    <br />
    <b>text</b>
  </p>
  <div class="list">
    <ul>
      <li>text</li>
      <li>text</li>
      <li>text</li>
    </ul>
  </div>
  <p>
    <b>text</b>text
    <br />
    <b>text</b>text
    <br />
    <b>text</b>text
    <br />
    <b>text</b>
  </p>
  <div class="list">
    <ul>
      <li>text</li>
      <li>text</li>
    </ul>
  </div>
</body>

Answer 3

简单调整CSS中的UL标签应该可以解决问题。

CSS：

ul {
    position: relative;
    right: 40px;  /* Adjust number to push away from the right side */
    float: right;
    list-style-type: disic;
    margin: 10px;
    padding: 0;
    line-height: 15px;
}

See jfiddle here

html定位 - 文本重叠其他文本

3 个答案: