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

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 定位 - 文本与其他文本重叠

html positioning - text overlapping other text

html

css

position

html-lists