内联ul [英] inline ul's
问题描述
Gang，
我的主题并不安静，无论我在寻找什么。我有一个
容器div，里面有两个ul'。我试图让两个ul'的
并排而不是一个在另一个之上。我已尝试在ul'上应用浮动声明
，但这要么让它们在左边排成一行，如果我在右边对齐，那么两个列表是向后显示的
。我想保持代码只有
可能没有包含ul'的内部所以其他容器（即div
或span）。我也尝试在
容器div上使用text-align属性，但这似乎也没有用。任何有关
的帮助下面的代码都会很棒。在此先感谢。
< html>
< style>
#wrapper {
保证金：0px;
填充：0px;
text-align：right; / *尝试将ul'对齐* *
宽度：400px;
border：1px纯红色;
}
＃col1 {
list-style：none;
text-decoration：none;
border：1px纯黑色;
text-align：left;
宽度：100px;
}
＃col2 {
list-style：none;
text-decoration：none;
border：1px solid green;
text -align：left;
宽度：100px;
}
< / style>
< body> ;
< div id =" wrapper">
< ul id =" col1">
< li> asdf< / li>
< li> zxcv< / li>
< li> qerw< / li>
< li> asdf< / li>
< / ul>
< ul id =" col2">
< li> 1234< / li>
< li> 5678< / li>
< li> 9012< / li>
< li> 3456< / li>
< / ul>
< / div>
< / body>
< ; / html>
Gang,
My subject is not quiet what I am looking for. I have a
container div with two ul''s inside. I am trying to get the two ul''s
to be side-by-side instead of one on top of the other. I have tried
applying the float declaration on the ul''s, but that either makes them
line up to the left and if I align to the right, the two lists are
displayed backwards. I would like to keep the code as bare as
possible without encasing the ul''s inside so other container (ie div
or span). I have also tried using the text-align property on the
container div, but that doesn''t seem to work either. Any help with
the code below would be great. Thanks in advance.
<html>
<style>
#wrapper {
margin: 0px;
padding: 0px;
text-align: right; /* attempt to align the ul''s to the right */
width: 400px;
border: 1px solid red;
}
#col1 {
list-style: none;
text-decoration: none;
border: 1px solid black;
text-align: left;
width: 100px;
}
#col2 {
list-style: none;
text-decoration: none;
border: 1px solid green;
text-align: left;
width: 100px;
}
</style>
<body>
<div id="wrapper">
<ul id="col1">
<li>asdf</li>
<li>zxcv</li>
<li>qerw</li>
<li>asdf</li>
</ul>
<ul id="col2">
<li>1234</li>
<li>5678</li>
<li>9012</li>
<li>3456</li>
</ul>
</div>
</body>
</html>
推荐答案
他******@yahoo.com 写道：
Gang，
我的主题不是安静我想要的。我有一个
容器div，里面有两个ul'。我试图让两个ul'的
并排而不是一个在另一个之上。我已尝试在ul'上应用浮动声明
，但这要么让它们在左边排成一行，如果我在右边对齐，那么两个列表是向后显示的
。
Gang,
My subject is not quiet what I am looking for. I have a
container div with two ul''s inside. I am trying to get the two ul''s
to be side-by-side instead of one on top of the other. I have tried
applying the float declaration on the ul''s, but that either makes them
line up to the left and if I align to the right, the two lists are
displayed backwards.
li {display：inline;}
Louise
li {display:inline;}
Louise
文章
< 11 ********************** @ j27g2000cwj.googlegroups .com>，
他****** @ yahoo.com 写道：
In article
<11**********************@j27g2000cwj.googlegroups .com>,
he******@yahoo.com wrote:
Gang，
我的主题并不安静，无论我在寻找什么。我有一个
容器div，里面有两个ul'。我试图让两个ul'的
并排而不是一个在另一个之上。我已尝试在ul'上应用浮动声明
，但这要么让它们在左边排成一行，如果我在右边对齐，那么两个列表是向后显示的
。我想保持代码只有
可能没有包含ul'的内部所以其他容器（即div
或span）。我也尝试在
容器div上使用text-align属性，但这似乎也没有用。任何有关
的帮助下面的代码都会很棒。在此先感谢。
< html>
< style>
#wrapper {
保证金：0px;
填充：0px;
Gang,
My subject is not quiet what I am looking for. I have a
container div with two ul''s inside. I am trying to get the two ul''s
to be side-by-side instead of one on top of the other. I have tried
applying the float declaration on the ul''s, but that either makes them
line up to the left and if I align to the right, the two lists are
displayed backwards. I would like to keep the code as bare as
possible without encasing the ul''s inside so other container (ie div
or span). I have also tried using the text-align property on the
container div, but that doesn''t seem to work either. Any help with
the code below would be great. Thanks in advance.
<html>
<style>
#wrapper {
margin: 0px;
padding: 0px;
否......不要那么快就放弃浮动的想法。什么是第一个
或秒取决于html和其他东西的顺序。再次尝试
浮动左边（你可以申请一些保证金来帮助你自己支付
）。现在摆脱html和
css中的包装（无论如何你都错了）。在
时间有一件事。如果你想要正确的话，可以再次浮动，但是反转顺序在
html
你想要什么？列表到底在哪里（除了一边
）？如果你对浮动权利的反对仅仅是错误的订单，那么上面就是解决方案。
-
dorayme
No... don''t give up the float idea so quickly. What comes first
or second depends on order in the html and other things. Try
again with float left (you can apply some margins to help
yourself out). Just get rid of the wrapper both in the html and
css for now (you are cssing it wrong anyway). One thing at a
time. If you want right, float again but reverse the order in the
html
What do you want? The lists to be where exactly (apart from side
by side)? if your objection to right float is merely wrong order,
then this above is solution.
--
dorayme
2月1日晚上10点17分，dorayme< doraymeRidT ... @ optusnet.com.auwrote：
On Feb 1, 10:17 pm, dorayme <doraymeRidT...@optusnet.com.auwrote:
文章
< 1170383777.406753.222 ... @ j27g2000cwj.googlegroups .com>，
hende ... @ yahoo.com写道：
In article
<1170383777.406753.222...@j27g2000cwj.googlegroups .com>,
hende...@yahoo.com wrote:
Gang，
Gang,
我的主题并不安静，无论我在寻找什么。我有一个
容器div，里面有两个ul'。我试图让两个ul'的
并排而不是一个在另一个之上。我已尝试在ul'上应用浮动声明
，但这要么让它们在左边排成一行，如果我在右边对齐，那么两个列表是向后显示的
。我想保持代码只有
可能没有包含ul'的内部所以其他容器（即div
或span）。我也尝试在
容器div上使用text-align属性，但这似乎也没有用。任何有关
的帮助下面的代码都会很棒。提前致谢。
My subject is not quiet what I am looking for. I have a
container div with two ul''s inside. I am trying to get the two ul''s
to be side-by-side instead of one on top of the other. I have tried
applying the float declaration on the ul''s, but that either makes them
line up to the left and if I align to the right, the two lists are
displayed backwards. I would like to keep the code as bare as
possible without encasing the ul''s inside so other container (ie div
or span). I have also tried using the text-align property on the
container div, but that doesn''t seem to work either. Any help with
the code below would be great. Thanks in advance.
< html>
< style>
#wrapper {
保证金：0px;
填充：0px;
<html>
<style>
#wrapper {
margin: 0px;
padding: 0px;
不......不要那么快就放弃浮动的想法。什么是第一个
或秒取决于html和其他东西的顺序。再次尝试
浮动左边（你可以申请一些保证金来帮助你自己支付
）。现在摆脱html和
css中的包装（无论如何你都错了）。在
时间有一件事。如果你想要正确的话，可以再次浮动，但是反转顺序在
html
你想要什么？列表到底在哪里（除了一边
）？如果你对权利浮动的反对只是错误的订单，那么上面就是解决方案。
-
dorayme
No... don''t give up the float idea so quickly. What comes first
or second depends on order in the html and other things. Try
again with float left (you can apply some margins to help
yourself out). Just get rid of the wrapper both in the html and
css for now (you are cssing it wrong anyway). One thing at a
time. If you want right, float again but reverse the order in the
html
What do you want? The lists to be where exactly (apart from side
by side)? if your objection to right float is merely wrong order,
then this above is solution.
--
dorayme
如果我颠倒了代码的顺序，那么当
查看或试图关注时，这将使它变得尴尬。该项目的总体目标是
必须包装div'或span'，每个包含两个ul'。两个
左边包装中的ul'需要与左边对齐，而
右边的两个ul'需要对齐在右边。我只是简单地将上面的部分编码为
。为了使事情变得更加复杂，包装器将具有可变大小，具体取决于浏览器的大小（它们的总体大小为50％）。 br />
我希望列表（在提供的示例中）与容器div的顶部和右侧的
对齐。还有其他任何方式我可以制作
ul'在右边对齐而不会在代码中反转它们的顺序吗？
如果这是令人困惑的，我可以快速编写样本，看看我正在谈论的是什么。顺便说一句，我怎样才能正确地css包装div？
If I reverse the order of the code, that will make it ackward when
viewing or trying to follow. The overall goal with the project is to
have to wrapper div''s or span''s that contain two ul''s in each. Two of
the ul''s in the left wrapper will need to be aligned to the left, and
the two ul''s on the right need to be aligned to the right. I just
coded that section above for simplicity. To make things even more
complicated, the wrappers will have variable sizes depending on the
size of the browser (they will both have an overall size of 50%).
I would like the lists (in the provided example) to be aligned to the
top and right of the container div. Is there any other way I can make
the ul''s align to the right without reversing their order in the code?
If this is to confusing, I can code up a sample real quick to see what
I am talking about. BTW, how can I css the wrapper div correctly?
这篇关于内联ul的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
