Question

我试图插入我认为是css块元素中的换行符。我已经尝试了简单的<br>标记并尝试调整带有边距，填充等的标题元素（例如h3）以适应块内部而没有运气。

这是我希望实现的一个例子http://imgur.com/oA5RSHo，这是我迄今为止所做的。 http://jsfiddle.net/3q7on4v2/我认为它非常接近，但还不像我想要的那样。任何帮助表示赞赏

<div id="bg"> <ul class="nav"> <h1> Tonight </h1> <li><a href="#notisia">E Notisia</a></li> <li><a href="#wega">Mercee</a></li> <li><a href="#konkulshon">Last Call</a></li> <li><a href="cinema">Unu-Unu</a></li> </ul> </div>

.nav {
list-style-type: none;
margin-top: 0px;
padding: 0;
overflow: hidden; }

.nav a{
display: block;
width: 200px;
height:60px;
font-weight: bold;
color: #ffffff;
background-color: #323643;
text-align: center;
line-height:60px;
padding: 4px;
text-decoration: none;
border-left: 1px solid #818181;}

.nav a:hover {background-color: #404452; }
.nav li{ float: right; }
h1 {
color: #F2F2F3;
display: inline-block;
margin-top: 15px;
margin-bottom: 0;
padding: 0; }
#bg { background-color: #323643; }

Answer 1

我更新了jsfiddle代码。所以看看吧。您将看到我在h1标签中添加了一个跨度，并将跨度设置为较小的字体，您可以根据需要使用不同的颜色。

此时你可能只需要一个包装器，所有东西都浮在右边。

<div id="bg">
    <ul class="nav">
        <li><a href="#notisia">E Notisia</a></li>
        <li><a href="#wega">Mercee</a></li>
        <li><a href="#konkulshon">Last Call</a></li>
        <li><a href="cinema">Unu-Unu</a></li>
    </ul>
<h1>Tonight
    <span>test</span>
</h1>
<div class="clear"></div>
</div>

＆＃13;

ul{padding:0; margin:0;}
ul li{padding:0; margin:0;}

.nav {
	list-style-type: none;
	margin-top: 0px;
	padding: 0;
	overflow: hidden;
    float:right;
}

.nav a{
	display: block;
	width: 200px;
	height:60px;
	font-weight: bold;
	color: #ffffff;
	background-color: #323643;
	text-align: center;
	line-height:60px;
	padding: 4px;
	text-decoration: none;
	border-left: 1px solid #818181;
}
.nav a:hover {background-color: #404452; }
.nav li{
	float: right;
}
h1 {
	color: #F2F2F3;
	display: inline-block;
	padding: 5px 10px;
    float:right;
    margin:0;
}
h1 span{ font-size:12px; display:block;}
.clear{ clear:both;}
#bg { background-color: #323643; margin:0; padding:0; }

＆＃13;

在块元素内插入“换行符”

1 个答案: