显示之间的间隔：内联的？ [英] 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: [phone] </p>
<p class="Fax">Fax: [phone]</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: [phone] Fax: [phone]
<!-- 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: [phone] Fax: [phone]
<!-- 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: [phone] Fax: [phone]
</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: [phone] Fax: [phone]
<!-- 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: [phone] Fax: [phone]
</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屋！