使 <li> 并排和页面底部的项目
[英]Make <li> items side by side and at bottom of page
问题描述
I am trying to make my list items side by side (horizontal). 
我正在尝试使我的列表项并排（水平）。 HOWEVER, I can only use html (no css). 但是，我只能使用html（无CSS）。
Also, I am trying to make the li items move below the image (to the bottom of the page). 另外，我正在尝试使li项移动到图像下方（到页面底部）。
I have tried various different attributes and have done lots of searching, but nothing seems to do the trick. 我尝试了各种不同的属性，并做了很多搜索，但似乎没有办法解决问题。
<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>
7 个解决方案
解决方案1
2 2015-06-20 17:59:14
Use this style attribute for li element: 对li元素使用以下样式属性：
style="text-align:left;float:left;display:inline-block;"
You need to add: 您需要添加：
float:left and display:inline-block float：left和display：inline-block
解决方案2
1 2015-06-20 17:57:21
Change 更改
<li style="text-align:left">
to 至
<li style="float:left">
to make the list items side-by-side. 使列表项并排。
解决方案3
0 已采纳
I am trying to make my list items side by side (horizontal).
Use style="display: inline-block" on the li elements. 在li元素上使用style="display: inline-block" 。
Also, I am trying to make the li items move below the image (to the bottom of the page).
Use style="position: fixed; left: 0; bottom: 0; width: 100%;" 使用style="position: fixed; left: 0; bottom: 0; width: 100%;" on the containing div element 在包含的div元素上
<div style="position: fixed; left: 0; bottom: 0; width: 100%;">
<ul style="list-style:none;">
<li style="text-align:left; display: inline-block;">
<a href="http://csc2.madonna.edu/~brabahy/hw5/museum.html">
<p style="color:blue">Previous room</p>
</a>
</li>
<li style="text-align:right; display: inline-block;">
<a href="http://csc2.madonna.edu/~brabahy/hw5/venus1.html">
<p style="color:blue">Next room</p>
</a>
</li>
</ul>
</div>
解决方案4
0 2015-06-20 18:00:05
Something like this https://jsfiddle.net/3v8j0xf1/ ? 像这样的https://jsfiddle.net/3v8j0xf1/吗？
changed 变了
<div style="background-color:black; margin-top:0px">...
to 至
<div style="background-color:black; margin-top:0px; float: left;">...
and li's 和李的
<li style="text-align:left">...
<li style="text-align:right">...
to 至
<li style="text-align:left; float: left;">...
<li style="text-align:right; float: left; margin-left: 20px;">
解决方案5
0 2015-06-20 18:04:25
You cant make list items display side by side without css, but I see you're using inline css so assuming you mean you cant use external css. 您不能使列表项没有CSS并排显示，但是我看到您使用的是内联CSS，因此假设您表示不能使用外部CSS。
this is my suggestion to both parts of your question, I also removed the p tags inside the li's as you shouldnt use them there. 这是我对您问题的两个部分的建议，我也删除了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>
解决方案6
0 2015-06-20 18:04:36
I have added bottom:0; position:absolute 我添加了bottom:0; position:absolute bottom:0; position:absolute to wrapper div . bottom:0; position:absolute包装器div bottom:0; position:absolute 。 Apart from it you will need to add float:left; 除此之外，您将需要添加float:left; to li. 给李。
<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>
You may think of removing the 您可能会想到删除
tags. 标签。
You may also see FIDDLE DEMO - https://jsfiddle.net/npralhad/3masxfkL/ 您可能还会看到FIDELE DEMO - https: //jsfiddle.net/npralhad/3masxfkL/
解决方案7
0 2015-06-20 18:11:03
Not sure the exact look you're looking for, but along the lines of what others are saying, I'd use inline-block on the list items. 不确定您要查找的确切外观，但是按照其他人的说法，我会在列表项上使用inline-block。 I also added a % width to the image to give you a little responsiveness and force the line break. 我还为图像添加了％宽度，以使您有一点响应并强制换行。
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.