Question

我有一个基本的问题，我有一个菜单框，其中有两个部分，右文字部分和左文本部分，但我不能水平布局，如图所示，我希望两者都对齐水平而不使用负边距。 enter image description here

使用Css：

<div id="Menu">
<div class="Menu-Left-Text">This<br />is the  <br />section for<br />left text.</div>
<div class="Menu-Right-Text">This<br />is the  <br />section for<br />right text.</div>
</div>

#Menu .Menu-Left-Text
{
margin-left: 9px; 
padding-top: 9px; 
font-size: 16pt;
font-family: 'ITC Avant Garde Gothic';
font-weight: bolder;
width: 189px;


  }
  #Menu .Menu-Right-Text
 {
float:right;
font-family: 'Times New Roman' , Times, serif;
font-weight: bold;
}

Answer 1

.Menu-Left-Text { float: left; width: 50%; }
.Menu-Right-Text { margin-left: 50%; }
#Menu { overflow: auto; }

使用上述方法表示#Menu内页面流中会有某些内容，这意味着您的#Menu的高度会受到其内容的影响。这将允许您将背景颜色/图像添加到实际可行的#Menu。

或者，如果您不关心它在IE7或更低版本中工作：

#Menu { display: table; }
#Menu > div { display: table-cell; }

这有利于双方占用相等的空间，以及影响#Menu

高度的所有内容

Answer 2

尝试在Menu-Left-Text类中写入float：left。所以你的新css会变成：

 #Menu .Menu-Left-Text {
    margin-left: 9px; 
    padding-top: 9px; 
    font-size: 16pt;
    font-family: 'ITC Avant Garde Gothic';
    font-weight: bolder;
   width: 189px;
  float:left;

}

#Menu .Menu-Right-Text { 浮：右;

 font-family: 'Times New Roman' , Times, serif;

 font-weight: bold;

}

Answer 3

你需要做这样的事情：

http://jsfiddle.net/patonar/Br2sQ/2/

Answer 4

试试这个

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Head -->
<title></title>
<style>
#Menu .Menu-Left-Text
{
float:left;
margin-left: 9px; 
padding-top: 9px; 
font-size: 16pt;
font-family: 'ITC Avant Garde Gothic';
font-weight: bolder;
width: 189px;


  }
#Menu .Menu-Right-Text
{
float:right;
margin-right: 9px; 
padding-top: 9px; 
font-size: 16pt;
font-family: 'Times New Roman' , Times, serif;
font-weight: bold;
}
</style>
</head>
<body>
<div id="Menu">
<div class="Menu-Left-Text">This<br />is the  <br />section for<br />left text.</div>
<div class="Menu-Right-Text">This<br />is the  <br />section for<br />right text.</div>
</div>
</body>
</html>

不使用负边距的基本Css浮动查询

4 个答案: