Question

我的div中有链接，它们覆盖整个页面的宽度，而我只希望文本可以点击。

HTML

<div class="categories">
        <a href="link1">link</a>
        <a href="link2">link</a>
        <a href="link3">link</a>
</div>

CSS

.categories {
margin-top: 5em;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
text-align: center;
}

.categories a {
display: block;
text-decoration: none;
color: #fff;
}

.categories a:hover {
text-decoration: underline;
}

Answer 1

编辑：考虑到您的评论，我建议您从private void populateFields() { // Only populate the text boxes and change the calendar date // if the row is not null from the database. if (mRowId != null) { ------- } else { SharedPreferences prefs = PreferenceManager.getDefaultSharedPreferences(this); String defaultTitleKey = getString(R.string.pref_task_title_key); String defaultTimeKey = getString(R.string.pref_default_time_from_now_key); String defaultTitle = prefs.getString(defaultTitleKey, null); String defaultTime = prefs.getString(defaultTimeKey, null); if(defaultTitle != null) mTitleText.setText(defaultTitle); if(defaultTime != null) mCalendar.add(Calendar.MINUTE, Integer.parseInt(defaultTime)); }删除display:block并切换到flexbox。

.categories a

body {
  background: lightgray;
}
.categories {
  margin-top: 5em;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: flex;
  flex-flow: column wrap;
}
.categories a {
  /* display: block; */
  align-self: center;
  text-decoration: none;
  color: #fff;
}
.categories a:hover {
  text-decoration: underline;
}

Answer 2

请参阅此fiddle

从

中删除display: block;

.categories a {
/* display: block; */
text-decoration: none;
color: #000;
}

删除display: block会使<a>内联。因此，要使<a>与您想要的方式一样，您可以按以下方式替换HTML

<div class="categories">
        <a href="link1">link1</a>
                <br/>
        <a href="link2">link</a>
                <br/>
        <a href="link3">link</a>
                <br/>
</div>

Answer 3

如果你想要相同的结构你可以使用display：table和margin：0 auto;并从类别中删除文本对齐中心。

＆＃13;

.categories {
margin-top: 5em;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;


}

.categories a {
display:table;
margin:0 auto;
text-decoration: none;
color: #000;
}

.categories a:hover {
text-decoration: underline;
}

＆＃13;

<div class="categories">
    <a href="link1">link</a>
    <a href="link2">link</a>
    <a href="link3">link</a>
</div>

＆＃13;

Answer 4

需要使用CSS设置样式。导航，字体大小，边距，填充，显示块或内联等。

CSS - 链接覆盖整个页面的宽度

4 个答案:

请参阅此fiddle