Fatal编程技术网
  • javascript/
  • Javascript 属性<；p></p>；不'；使用软盒时，不要断线

Javascript 属性<；p></p>；不'；使用软盒时，不要断线

javascript jquery html css

Javascript 属性<；p></p>；不'；使用软盒时，不要断线,javascript,jquery,html,css,flexbox,Javascript,Jquery,Html,Css,Flexbox,我正在设计一个灵活的网站，由5个元素组成（4个元素和1个），在添加元素之前，一切都很好，不想给我换行符。我还尝试了包括display:block并尝试以多种不同的方式设计样式，但没有任何不同；大多数情况下，它只是取代了所有的网站 谢谢你的帮助 代码如下： <!DOCTYPE html><!--<!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1

我正在设计一个灵活的网站，由5个元素组成（4个
元素和1个
），在添加
元素之前，一切都很好，不想给我换行符。我还尝试了包括
display:block并尝试以多种不同的方式设计样式，但没有任何不同；大多数情况下，它只是取代了所有的网站

谢谢你的帮助

代码如下：


<!DOCTYPE html><!--<!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"-->
<html>
<head>
        <meta charset="utf-8"/>
    <title></title>
    <style type="text/css"> 

    body{width:100%;
        -webkit-box-orient:vertical;
        -webkit-box-pack: center;
        margin: 0px auto;
        padding: 0px;
        display: -webkit-box;}
    div,iframe{border:1px solid black;
                -webkit-box-flex:1;
                display: -webkit-box;}
        div#pas1{height: 33.33vh;
            -webkit-box-pack: center;
            -webkit-box-align: end;}
        div#pas2{-webkit-box-orient:horizontal;
                    height: 33.33vh;}
        div#a{width: 33.33vw;
            -webkit-box-pack: end;
            -webkit-box-align: center;
            border:1px solid black;} 
        div#iframe{width:33.33vw;
                max-width:500px;}
        div#b{width: 33.33vw;
            -webkit-box-pack: start;
            -webkit-box-align: center;} 
        div#pas3{height: 33.33vh;
            -webkit-box-pack: start;}
    </style>
</head>
<body>

        <div id="pas1">
        </div>
        <div id="pas2">
            <div id="a"><p><a target="jednotka">a</a></p>
                        <p><a target="jednotka">b</a></p>
                        <p><a target="jednotka">c</a></p></div>
            <div id="iframe"><iframe name="jednotka" ></iframe></div>
            <div id="b"></div>
        </div>
        <div id="pas3">
        </div>
</body>
</html>




体{宽：100%；
-网络工具包盒方向：垂直；
-webkit盒包：中心；
保证金：0px自动；
填充：0px；
显示：-webkit框；}
div，iframe{边框：1px纯黑色；
-webkit-box-flex:1；
显示：-webkit框；}
高度：33.33vh；
-webkit盒包：中心；
-webkit框对齐：结束；}
div#pas2{-webkit盒方向：水平；
高度：33.33vh；}
宽度：33.33vw；
-webkit盒式包装：结束；
-webkit框对齐：居中；
边框：1px纯黑；}
div#iframe{宽度：33.33vw；
最大宽度：500px；}
宽度：33.33vw；
-webkit盒包：开始；
-webkit框对齐：居中；}
高度：33.33vh；
-webkit盒包：开始；}
a

b

c


因此您想要在div id#a中为p元素换行
div#a p{width:100%；display:inline block；}检查css第I部分还添加了一些用于样式设置的附加css，但是display:inline block；而宽度是换行的原因。
在side div#a{-webkit-box-pack:end；}中设置的css是文本从div#a开头的原因

正文{
宽度：100%；
-网络工具包盒方向：垂直；
-webkit盒包：中心；
保证金：0px自动；
填充：0px；
显示：-网络工具包盒；
}
分区，
iframe{
边框：1px纯黑；
-webkit-box-flex:1；
显示：-网络工具包盒；
}
分区#pas1{
高度：33.33vh；
-webkit盒包：中心；
-webkit框对齐：结束；
}
分区#pas2{
-webkit盒方向：水平；
高度：33.33vh；
}
a区{
宽度：33.33vw；
-webkit盒式包装：结束；
-webkit框对齐：居中；
边框：1px纯黑；
}
div#iframe{
宽度：33.33vw；
最大宽度：500px；
}
b组{
宽度：33.33vw；
-webkit盒包：开始；
-webkit框对齐：居中；
}
分区#pas3{
高度：33.33vh；
-webkit盒包：开始；
}
#a p{
宽度：100%；
显示：内联块；
保证金：0；
}
#a p a{
文字装饰：无；
利润率：5px0px；
字体大小：18px；}











使用新的
flexbox
规格标准：
&





*{框大小：边框框；边距：0；}
身体{
宽度：100%；
保证金：0；
填充：0px；
显示器：flex；
弯曲方向：立柱；
对齐内容：居中对齐；
}
div{
边框：1px纯黑；
flex:1自动；
显示器：flex；
}
iframe{宽度：100%；高度：100%；边框：0；}
分区#pas1{
高度：33.33vh；
证明项目：中心；
对齐项目：柔性端；
}
分区#pas2{
高度：33.33vh；
弯曲方向：行；
}
a区{
宽度：33.33vw；
边框：1px纯黑；
弯曲方向：立柱；
证明内容：中心；
对齐项目：柔性端；
}
div#iframe{
宽度：33.33vw；
最大宽度：500px；
}
b组{
宽度：33.33vw；
调整内容：灵活启动；
对齐项目：居中；
}
分区#pas3{
高度：33.33vh；
证明内容：开始；
}



a

b

c


预期输出是什么？为什么要使用段落作为分隔符…这不是它们的用途。？使用边距…另外，您使用的是非常旧的flexbox语法。您可以添加一个完整的标记和css…并且
不是一个属性…它是一个元素。非常感谢Mostafa，这正是我所需要的。