Question

我正在尝试将我的列表项并排（水平）。但是，我只能使用html（没有css）。

另外，我正在尝试让li项目移动到图像下方（到页面底部）。

我尝试了各种不同的属性并进行了大量搜索，但似乎没有什么可行的。

<div style="background-color:black; margin-top:0px">
    <a href="http://csc2.madonna.edu/~brabahy/hw5/mercury2.html"><img src="http://csc2.madonna.edu/~brabahy/hw5/images/Mercury1.jpg" style="float:left; margin-right:10px" height="400" width="400"></a>
    <p style="color:brown">Mercury is the smallest planet, and it's closest to the Sun of the eight planets in the Solar System. It has an orbital period of about 88 Earth days.</p>
</div>

<br><br><br><br>

<div>
    <ul style="list-style:none">
        <li style="text-align:left"><a href="http://csc2.madonna.edu/~brabahy/hw5/museum.html"><p style="color:blue">Previous room</p></a>
        <li style="text-align:right"><a href="http://csc2.madonna.edu/~brabahy/hw5/venus1.html"><p style="color:blue">Next room</p></a>
    </ul>
</div>

Answer 1

更改

<li style="text-align:left">

到

<li style="float:left">

并排列出项目。

Answer 2

将此样式属性用于li元素：

style="text-align:left;float:left;display:inline-block;"

您需要添加：

float：left并显示：inline-block

Answer 3

我正在尝试将我的列表项并排（水平）。

在npm link元素上使用style="display: inline-block"。

另外，我正在尝试让li项目移动到图像下方（到页面底部）。

在包含li元素

上使用style="position: fixed; left: 0; bottom: 0; width: 100%;"

（Demo）

div

Answer 4

你不能在没有css的情况下并排显示列表项，但我看到你正在使用内联css，所以假设你的意思是你不能使用外部css。

这是我对你问题的两个部分的建议，我也删除了li里面的p标签，因为你不应该在那里使用它们。

<div style="background-color:black; margin-top:0px">
    <a href="http://csc2.madonna.edu/~brabahy/hw5/mercury2.html"><img src="http://csc2.madonna.edu/~brabahy/hw5/images/Mercury1.jpg" style="float:left; margin-right:10px" height="400" width="400"></a>
    <p style="color:brown">Mercury is the smallest planet, and it's closest to the Sun of the eight planets in the Solar System. It has an orbital period of about 88 Earth days.</p>
</div>


<div style="clear:both">
    <ul style="list-style:none;padding:0">
        <li style="text-align:left;display:inline-block;width:50%;color:blue"><a href="http://csc2.madonna.edu/~brabahy/hw5/museum.html">Previous room</a>
        <li style="text-align:right;display:inline-block;width:50%;color:blue"><a href="http://csc2.madonna.edu/~brabahy/hw5/venus1.html">Next room</a>
    </ul>
</div>

Answer 5

我已将bottom:0; position:absolute添加到包装器div。除此之外，您还需要向li添加float:left;。

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
</head>
<body>
<div style="background-color:black; margin-top:0px">
    <a href="http://csc2.madonna.edu/~brabahy/hw5/mercury2.html"><img src="http://csc2.madonna.edu/~brabahy/hw5/images/Mercury1.jpg" style="float:left; margin-right:10px" height="400" width="400"></a>
    <p style="color:brown">Mercury is the smallest planet, and it's closest to the Sun of the eight planets in the Solar System. It has an orbital period of about 88 Earth days.</p>
</div>

<br><br><br><br>

<div style="bottom: 0px; position: absolute;">
    <ul style="list-style:none">
        <li style="text-align: right; float: left; margin-right: 10px;">
            <a href="http://csc2.madonna.edu/~brabahy/hw5/museum.html"><p style="color:blue">Previous room</p></a>
        </li>
        <li style="text-align: right; float: left; margin-right: 10px;">
            <a href="http://csc2.madonna.edu/~brabahy/hw5/venus1.html"><p style="color:blue">Next room</p></a>
        </li>
    </ul>
</div>
</body>
</html>

您可以考虑删除
标签。

您可能还会看到FIDDLE DEMO - https://jsfiddle.net/npralhad/3masxfkL/

Answer 6

不确定您正在寻找的确切外观，但根据其他人的说法，我会在列表项上使用内联块。我还为图像添加了％宽度，以便为您提供一点反应并强制换行。

<div style="background-color:black; margin-top:0px">
  <a href="http://csc2.madonna.edu/~brabahy/hw5/mercury2.html"><img src="http://csc2.madonna.edu/~brabahy/hw5/images/Mercury1.jpg" alt="" style="float:left; margin-right:10px; height:auto; width:100%;" /></a>
  <p style="color:brown">Mercury is the smallest planet, and it's closest to the Sun of the eight planets in the Solar System. It has an orbital period of about 88 Earth days.</p>
</div>
<br/>
<div style="position:relative; bottom:0;">
  <ul style="list-style:none">
    <li style="display:inline-block;"><a href="http://csc2.madonna.edu/~brabahy/hw5/museum.html"><p style="margin:0; color:blue">Previous room</p></a>
    <li style="display:inline-block; margin-left:3em;"><a href="http://csc2.madonna.edu/~brabahy/hw5/venus1.html"><p style="color:blue">Next room</p></a>
  </ul>
</div>

Answer 7

像https://jsfiddle.net/3v8j0xf1/这样的东西？

改变

<div style="background-color:black; margin-top:0px">...

到

<div style="background-color:black; margin-top:0px; float: left;">...

和li的

<li style="text-align:left">...
<li style="text-align:right">...

到

<li style="text-align:left; float: left;">...
<li style="text-align:right; float: left; margin-left: 20px;">

将<li>项目并排放置在页面底部

7 个答案: