代码之家  ›  专栏  ›  技术社区  ›  RejectEd27

无法从方框中删除边距

bootstrap-4 margin twitter-bootstrap css html
  •  1
  • RejectEd27  · 技术社区  · 7 年前

    我想并排放置2个div,但其中一个div有一个我无法删除的边距。 

    .middleHolder{
	padding: 0px !important;
}

body{
	font-family: Raleway, sans-serif;
}

.numberedTitle{
	font-family: Roboto, sans-serif;
	font-size: 62px;
	padding-left: 15px;
	margin: 0 !important;
	width: 100px;
}

.subtitleHolder{
	display: inline-block;
}

p{
	font-family: Georgia, serif;
	font-style: italic;
	font-size: 17px !important;
	font-weight: 300;
	color: /*#888*/;
}
    <head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
</head>

<div class="middleHolder col-md-12">
  <div class="numberedTitle">
    <span>01</span>
  </div>
  <div class="subtitleHolder">
    <p>Lorem Ipsum</p>
    <h3>Filler One</h3>
  </div>
</div>

    我试过使用!重要的功能,但似乎不起作用。

    What it should look like

    我还删除了 col-md-12 在两者上 numberedTitle 和 subtitleHolder 但这并没有改变任何事情。

    5 回复  |  直到 7 年前
        1
  •  1
  •   Bourbia Brahim    7 年前

    只需添加 display: inline-block ; 到您的 .numberedTitle 并且不需要设置边距。

    sett inline block,将使div充当内联html标记,但也保留块元素的维度属性(如宽度、高度)。 

    .middleHolder{
	padding: 0px !important;
}

body{
	font-family: Raleway, sans-serif;
}

.numberedTitle{
	font-family: Roboto, sans-serif;
	font-size: 62px;
	padding-left: 15px;
	width: 100px;
  display: inline-block;
}

.subtitleHolder{
	display: inline-block;
}

p{
	font-family: Georgia, serif;
	font-style: italic;
	font-size: 17px !important;
	font-weight: 300;
	color: /*#888*/;
}
    <head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
</head>

<div class="middleHolder col-md-12">
  <div class="numberedTitle">
    <span>01</span>
  </div>
  <div class="subtitleHolder">
    <p>Lorem Ipsum</p>
    <h3>Filler One</h3>
  </div>
</div>
        2
  •  1
  •   user7207170 user7207170    7 年前

    这并不是因为你的利润,他们没有放在一起。这是因为div not an inline component 与span不同,因此默认情况下,每个div都在新行中生成。 要使它们并排排列,您只需添加 float:left 到div,如下所示。希望有帮助。 

    .middleHolder{
	padding: 0px !important;
}

body{
	font-family: Raleway, sans-serif;
}

.numberedTitle{
	font-family: Roboto, sans-serif;
	font-size: 62px;
	padding-left: 15px;
	float:left;
	width: 100px;
}

.subtitleHolder{
	display: inline-block;
}

p{
	font-family: Georgia, serif;
	font-style: italic;
	font-size: 17px !important;
	font-weight: 300;
	color: /*#888*/;
}
    <head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
</head>

<div class="middleHolder col-md-12">
  <div class="numberedTitle">
    <span>01</span>
  </div>
  <div class="subtitleHolder">
    <p>Lorem Ipsum</p>
    <h3>Filler One</h3>
  </div>
</div>
        3
  •  1
  •   Andrii Pryimak    7 年前

    使用 display:inline-block; 到您的 numberedTitle 类别: 

    .middleHolder{
	padding: 0px !important;
}

body{
	font-family: Raleway, sans-serif;
}

.numberedTitle{
	font-family: Roboto, sans-serif;
	font-size: 62px;
	padding-left: 15px;
	margin: 0 !important;
	width: 100px;
  display:inline-block;
}

.subtitleHolder{
	display: inline-block;
}

p{
	font-family: Georgia, serif;
	font-style: italic;
	font-size: 17px !important;
	font-weight: 300;
	color: /*#888*/;
}
    <head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
</head>

<div class="middleHolder col-md-12">
  <div class="numberedTitle">
    <span>01</span>
  </div>
  <div class="subtitleHolder">
    <p>Lorem Ipsum</p>
    <h3>Filler One</h3>
  </div>
</div>
        4
  •  0
  •   MHD Alaa Alhaj Shuo    7 年前

    这 margin 出现是因为它是默认的div行为,这意味着它将作为 块 即使您为 宽度 .

    因此,您可以使用bootstrap内置类(即。 class="pull-left" )为了使元件浮动到左侧,这应该可以解决您的问题。 

    .middleHolder{
	padding: 0px !important;
}

body{
	font-family: Raleway, sans-serif;
}

.numberedTitle{
	font-family: Roboto, sans-serif;
	font-size: 62px;
	padding-left: 15px;
	margin: 0 !important;
	width: 100px;
}

.subtitleHolder{
	display: inline-block;
}

p{
	font-family: Georgia, serif;
	font-style: italic;
	font-size: 17px !important;
	font-weight: 300;
	color: /*#888*/;
}
    <head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
</head>

<div class="middleHolder col-md-12">
  <div class="numberedTitle pull-left">
    <span>01</span>
  </div>
  <div class="subtitleHolder pull-left">
    <p>Lorem Ipsum</p>
    <h3>Filler One</h3>
  </div>
</div>

    或者,你可以添加 display: inline-block 到 .numberedTitle . 

    .middleHolder{
	padding: 0px !important;
}

body{
	font-family: Raleway, sans-serif;
}

.numberedTitle{
	font-family: Roboto, sans-serif;
	font-size: 62px;
	padding-left: 15px;
	margin: 0 !important;
	width: 100px;
	display: inline-block;
}

.subtitleHolder{
	display: inline-block;
}

p{
	font-family: Georgia, serif;
	font-style: italic;
	font-size: 17px !important;
	font-weight: 300;
	color: /*#888*/;
}
    <head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
</head>

<div class="middleHolder col-md-12">
  <div class="numberedTitle">
    <span>01</span>
  </div>
  <div class="subtitleHolder">
    <p>Lorem Ipsum</p>
    <h3>Filler One</h3>
  </div>
</div>
        5
  •  0
  •   Elvin Mammadov    7 年前

    只需添加显示:内联块;给你的。数字标题 

    . numberedTitle {
display: inline-block;
}
    推荐文章
    Yunusović  ·  我无法用css更改html段落颜色
    1 年前
    Blake  ·  无法使用CSS旋转Angular 15中的字体图标
    1 年前
    Maarten -Monica for president  ·  将图像放在锚点标记内时调整网格中的图像大小
    1 年前
    Phil Lucks  ·  如何制作边界的外半径?
    1 年前
    roy_meir  ·  创建自定义下拉式元素
    1 年前
    Community wiki  ·  如何为触摸设备优化网站
    1 年前
    Paras Chandravanshi  ·  为什么<ul>没有从其父<p>元素继承?
    1 年前
    tpetzoldt  ·  如何在有光泽的情况下抑制图像的抗锯齿?
    1 年前
    boyenec  ·  反应如何将css样式应用于我从api respose获得的页面的spcifc部分
    1 年前
    manofconstsorrow  ·  点击导航项目关闭汉堡菜单
    1 年前
    关于  
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号