显示之间的间隔:内联的? [英] Breaks in between display: inline's ?
问题描述
< div id =" container">
< div id =" main">
< div id =" header" >
< p class =" Address"> 123 Fake Street,< / p>
< p class =" City"> Crazy City,< / p>
< p class ="省"> Ontario< / p>
< p class =" PostalCode"> ; H0H 0H0< / p>
< p class =" Telephone">电话:555-1234< / p>
< p class =" ;传真">传真:555-4321< / p>
< / div>
< p class =" Blurb"> Hello Hello blah blah< ; / p>
< / div>
< / div>
我需要做的是得到结果如下:
<! - 以下两行应居中 - >
123 Fake Street,Crazy City,Ontario H0H 0H0
电话:555-1234传真:555-4321
<! - 其余应该是正常的,或左对齐 - >
你好,不管怎么说等等
我成功做到这一点的唯一方法就是创造一个新的
div我命名为centerRow我把这两行包裹起来我想要(即第一个centerRow div包裹地址,城市,
省和邮政编码,第二个中心线div包裹着
电话和传真)。我绝对想避免这种情况。我想在实际的HTML中避免使用任何类型的格式化
。已经有
"标题" div正在推动它。
这是我到目前为止所尝试的:
#header {text-align:center ; margin-left:auto; margin-right:auto; }
#header p.Address {float:left; }
#header p.City {float:left; }
#header p.Province {float:left; }
#header p.PostalCode {}
#header p.Telephone {float:left; }
#header p.Fax {}
花车只需左对齐任何内容,无论我有什么中心我已经
试图在父容器等中进行。所以另一种解决方案是:b
$ b #header {text-align:center; margin-left:auto; margin-right:auto; }
#header p.Address {display:inline; }
#header p.City {display:inline; }
#header p.Province {display:inline; }
#header p.PostalCode {display:inline; }
#header p.Telephone {display:inline; }
#header p.Fax {display:inline; }
这里的问题是,在PostalCode和电话之间没有办法(我知道的)可以暂停
。
有什么建议吗?并且不要告诉我添加BR! =)
Mathieu
ma*@rumblehousemedia.com
http://www.rumblehousemedia.com/
Mat写道:我需要做的是得到以下结果:
<! - 以下两行应该居中 - >
123 Fake Street,Crazy City,Ontario H0H 0H0
电话:555-1234传真:555-4321
<! - 剩下的应该是正常的,或者左对齐 - >
你好,不管什么等等等等。
怎么样?这是一个地址,对吗?
< head>
< style type =" text / css">
#header {text-align:center; margin-left:auto; margin-right:auto; }
地址{font-style:normal; }
< / style>
< / head>
< body>
< div id =" container">
< div id =" main">
< div id =" header">
<地址> 123 Fake Street,Crazy City,Ontario H0H 0H0< / br>
电话:555-1234传真:555-4321
< / address>
< / div>
< p class =" Blurb"> Hello Hello blah blah< / p>
< / div>
< / div>
< / body>
< / html>
-
-bts
-这个空间故意留空。
Beauregard T. Shagnasty <一个********* @ example.invalid>。在消息中写道
新闻:3a ************* @ individual.net ...Mat写道:我需要做的是得到以下结果:
<! - 以下两行应该居中 - >
123 Fake Street,Crazy City,Ontario H0H 0H0
电话:555-1234传真:555-4321
<! - 剩下的应该是正常的,或者左对齐 - >
你好,不管怎么说等等
这个怎么样?这是一个地址,对吗?
< head>
< style type =" text / css">
#header {text-align:center ; margin-left:auto; margin-right:auto; }
地址{font-style:normal; }
< / style>
< / head>
< body>
< div id =" container">
< div id =" main">
< div id =" header">
< address> 123 Fake Street,Crazy City,Ontario H0H 0H0< / br>
< /地址>
< / div>
< p class =" Blurb"> Hello Hello blah blah< / p>
< / div>
< / div>
< / body>
< / html>>
哎呀-e-daisy。这是错的:< / br> :-(
签名,
我
我写道:
哎呀-e-daisy。这是错的:< / br>: - (
错字。但它仍然在我的测试中工作。即使在IE中。
当然应该是< br>
-
-bts
- 这个空间故意留空。
<div id="container">
<div id="main">
<div id="header">
<p class="Address">123 Fake Street, </p>
<p class="City">Crazy City, </p>
<p class="Province">Ontario </p>
<p class="PostalCode">H0H 0H0</p>
<p class="Telephone">Telephone: 555-1234 </p>
<p class="Fax">Fax: 555-4321</p>
</div>
<p class="Blurb">Hello whatever blah blah</p>
</div>
</div>
What I need to do is get the following result:
<!-- the following two lines should be centered -->
123 Fake Street, Crazy City, Ontario H0H 0H0
Telephone: 555-1234 Fax: 555-4321
<!-- the rest should be normal, or left-aligned -->
Hello whatever blah blah
The only way I was successfully able to do this was by creating a new
div that I named "centerRow" which I wrapped around the two rows I
wanted (ie, the first centerRow div wrapped around Address, City,
Province and PostalCode, and the second centerRow div wrapped around
Telephone and Fax). I absolutely want to avoid this. I want to avoid
any type of formatting in the actual HTML. Already having the
"header" div is pushing it.
Here''s what I''ve tried so far:
#header { text-align: center; margin-left: auto; margin-right: auto; }
#header p.Address { float: left; }
#header p.City { float: left; }
#header p.Province { float: left; }
#header p.PostalCode { }
#header p.Telephone { float: left; }
#header p.Fax { }
The floats simply left-align anything regardless of any centering I''ve
attempted to do in parent containers etc. So the other solution would
have been:
#header { text-align: center; margin-left: auto; margin-right: auto; }
#header p.Address { display: inline; }
#header p.City { display: inline; }
#header p.Province { display: inline; }
#header p.PostalCode { display: inline; }
#header p.Telephone { display: inline; }
#header p.Fax { display: inline; }
Problem here is that there''s no way (that I know of) to put a break
between PostalCode and Telephone.
Any suggestions? And don''t tell me to add a BR!!! =)
Mathieu
ma*@rumblehousemedia.com
http://www.rumblehousemedia.com/
Mat wrote:What I need to do is get the following result:
<!-- the following two lines should be centered -->
123 Fake Street, Crazy City, Ontario H0H 0H0
Telephone: 555-1234 Fax: 555-4321
<!-- the rest should be normal, or left-aligned -->
Hello whatever blah blah
How about this? It''s an address, correct?
<head>
<style type="text/css">
#header { text-align: center; margin-left: auto; margin-right: auto; }
address { font-style: normal; }
</style>
</head>
<body>
<div id="container">
<div id="main">
<div id="header">
<address>123 Fake Street, Crazy City, Ontario H0H 0H0</br>
Telephone: 555-1234 Fax: 555-4321
</address>
</div>
<p class="Blurb">Hello whatever blah blah</p>
</div>
</div>
</body>
</html>
--
-bts
-This space intentionally left blank.
"Beauregard T. Shagnasty" <a.*********@example.invalid> wrote in message
news:3a*************@individual.net...Mat wrote:What I need to do is get the following result:
<!-- the following two lines should be centered -->
123 Fake Street, Crazy City, Ontario H0H 0H0
Telephone: 555-1234 Fax: 555-4321
<!-- the rest should be normal, or left-aligned -->
Hello whatever blah blah
How about this? It''s an address, correct?
<head>
<style type="text/css">
#header { text-align: center; margin-left: auto; margin-right: auto; }
address { font-style: normal; }
</style>
</head>
<body>
<div id="container">
<div id="main">
<div id="header">
<address>123 Fake Street, Crazy City, Ontario H0H 0H0</br>
Telephone: 555-1234 Fax: 555-4321
</address>
</div>
<p class="Blurb">Hello whatever blah blah</p>
</div>
</div>
</body>
</html>
Whoops-e-daisy. This is wrong: </br> :-(
Signed,
me
me wrote:
Whoops-e-daisy. This is wrong: </br> :-(
Typo. It still worked in my test, though. Even in IE.
Should be <br> of course.
--
-bts
-This space intentionally left blank.
这篇关于显示之间的间隔:内联的?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!