PHP & HTML - echo li tag without break line
-2
i have this code:
<ol>
<?php foreach ($articles as $article) { ?>
<li>
<img src="public_html/images/example.jpg" height="250" width="250">
<br />
<a href="public_html/article.php?id=<?php echo
$article['article_id'];?>">
<?php echo $article['article_title'];?>
</a>
- <small>
posted <?php echo date('l jS', $article['article_timestamp'])?>
</small>
</li>
<?php } ?>
</ol>
now it's print my in this way:
img
title
img
title
...
and i want it's print my like this:
img img img ...
title title title
i try to break line or use in div tag but it's don't work.
how can I do this?
thank's
php html
asked Nov 14 '18 at 20:04
liran 2443liran 2443
1
add a comment |
-2
i have this code:
<ol>
<?php foreach ($articles as $article) { ?>
<li>
<img src="public_html/images/example.jpg" height="250" width="250">
<br />
<a href="public_html/article.php?id=<?php echo
$article['article_id'];?>">
<?php echo $article['article_title'];?>
</a>
- <small>
posted <?php echo date('l jS', $article['article_timestamp'])?>
</small>
</li>
<?php } ?>
</ol>
now it's print my in this way:
img
title
img
title
...
and i want it's print my like this:
img img img ...
title title title
i try to break line or use in div tag but it's don't work.
how can I do this?
thank's
php html
asked Nov 14 '18 at 20:04
liran 2443liran 2443
1
1
Have you tried resolving this yourself first?
– Funk Forty Niner
Nov 14 '18 at 20:08
1
This is the default behavior of Ordered and Unordered list (UL/OL) that the list items (LI) are block level elements. You have to give the li a style display:block-inline.
– Nawed Khan
Nov 14 '18 at 20:11
Think about using a framework like bootstrap: getbootstrap.com/docs/4.1/layout/grid
– Edwin Krause
Nov 14 '18 at 20:15
1
Possible duplicate of How do I prevent a line break occurring before an unordered list?
– Martin
Nov 14 '18 at 20:34
add a comment |
-2
-2
-2
i have this code:
<ol>
<?php foreach ($articles as $article) { ?>
<li>
<img src="public_html/images/example.jpg" height="250" width="250">
<br />
<a href="public_html/article.php?id=<?php echo
$article['article_id'];?>">
<?php echo $article['article_title'];?>
</a>
- <small>
posted <?php echo date('l jS', $article['article_timestamp'])?>
</small>
</li>
<?php } ?>
</ol>
now it's print my in this way:
img
title
img
title
...
and i want it's print my like this:
img img img ...
title title title
i try to break line or use in div tag but it's don't work.
how can I do this?
thank's
php html
asked Nov 14 '18 at 20:04
liran 2443liran 2443
1
i have this code:
<ol>
<?php foreach ($articles as $article) { ?>
<li>
<img src="public_html/images/example.jpg" height="250" width="250">
<br />
<a href="public_html/article.php?id=<?php echo
$article['article_id'];?>">
<?php echo $article['article_title'];?>
</a>
- <small>
posted <?php echo date('l jS', $article['article_timestamp'])?>
</small>
</li>
<?php } ?>
</ol>
now it's print my in this way:
img
title
img
title
...
and i want it's print my like this:
img img img ...
title title title
i try to break line or use in div tag but it's don't work.
how can I do this?
thank's
php html
php html
asked Nov 14 '18 at 20:04
liran 2443liran 2443
1
asked Nov 14 '18 at 20:04
liran 2443liran 2443
1
asked Nov 14 '18 at 20:04
liran 2443liran 2443
1
asked Nov 14 '18 at 20:04
liran 2443liran 2443
1
asked Nov 14 '18 at 20:04
liran 2443liran 2443
1
1
1
Have you tried resolving this yourself first?
– Funk Forty Niner
Nov 14 '18 at 20:08
1
This is the default behavior of Ordered and Unordered list (UL/OL) that the list items (LI) are block level elements. You have to give the li a style display:block-inline.
– Nawed Khan
Nov 14 '18 at 20:11
Think about using a framework like bootstrap: getbootstrap.com/docs/4.1/layout/grid
– Edwin Krause
Nov 14 '18 at 20:15
1
Possible duplicate of How do I prevent a line break occurring before an unordered list?
– Martin
Nov 14 '18 at 20:34
add a comment |
1
Have you tried resolving this yourself first?
– Funk Forty Niner
Nov 14 '18 at 20:08
1
This is the default behavior of Ordered and Unordered list (UL/OL) that the list items (LI) are block level elements. You have to give the li a style display:block-inline.
– Nawed Khan
Nov 14 '18 at 20:11
Think about using a framework like bootstrap: getbootstrap.com/docs/4.1/layout/grid
– Edwin Krause
Nov 14 '18 at 20:15
1
Possible duplicate of How do I prevent a line break occurring before an unordered list?
– Martin
Nov 14 '18 at 20:34
1
1
Have you tried resolving this yourself first?
– Funk Forty Niner
Nov 14 '18 at 20:08
Have you tried resolving this yourself first?
– Funk Forty Niner
Nov 14 '18 at 20:08
1
1
This is the default behavior of Ordered and Unordered list (UL/OL) that the list items (LI) are block level elements. You have to give the li a style display:block-inline.
– Nawed Khan
Nov 14 '18 at 20:11
This is the default behavior of Ordered and Unordered list (UL/OL) that the list items (LI) are block level elements. You have to give the li a style display:block-inline.
– Nawed Khan
Nov 14 '18 at 20:11
Think about using a framework like bootstrap: getbootstrap.com/docs/4.1/layout/grid
– Edwin Krause
Nov 14 '18 at 20:15
Think about using a framework like bootstrap: getbootstrap.com/docs/4.1/layout/grid
– Edwin Krause
Nov 14 '18 at 20:15
1
1
Possible duplicate of How do I prevent a line break occurring before an unordered list?
– Martin
Nov 14 '18 at 20:34
Possible duplicate of How do I prevent a line break occurring before an unordered list?
– Martin
Nov 14 '18 at 20:34
add a comment |
3 Answers
3
active
oldest
votes
0
I would recommend looking into something like CSS Grid to get the layout you want. But a simple way to solve this will be to float your list items to the left. Include the following style tags before your code:
<style>
ul li { float:left;}
</style>
<ol>
<?php foreach ($articles as $article) { ?>
<li>
<img src="public_html/images/example.jpg" height="250" width="250">
<br />
<a href="public_html/article.php?id=<?php echo
$article['article_id'];?>">
<?php echo $article['article_title'];?>
</a>
- <small>
posted <?php echo date('l jS', $article['article_timestamp'])?>
</small>
</li>
<?php } ?>
</ol>
answered Nov 14 '18 at 20:27
MichaelvEMichaelvE
1,2981311
add a comment |
0
You could just use simple css:
li {
display: inline-block;
}
answered Nov 14 '18 at 20:29
BenoitLussierBenoitLussier
121210
add a comment |
0
One way is to go with bootstrap and your code would then look something like this:
<div class="container">
<ol class="row">
<?php foreach ($articles as $article) { ?>
<li class="col-sm">
<img src="public_html/images/example.jpg" height="250" width="250">
<br />
<a href="public_html/article.php?id=<?php echo $article['article_id'];?>">
<?php echo $article['article_title'];?>
</a>
- <small>
posted <?php echo date('l jS', $article['article_timestamp'])?>
</small>
</li>
<?php } ?>
</ol>
</div>
Dont forget to install the bootstrap CSS file into your code Quickstart to bootstrap
answered Nov 14 '18 at 20:22
Edwin KrauseEdwin Krause
1,09111122
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53307970%2fphp-html-echo-li-tag-without-break-line%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
I would recommend looking into something like CSS Grid to get the layout you want. But a simple way to solve this will be to float your list items to the left. Include the following style tags before your code:
<style>
ul li { float:left;}
</style>
<ol>
<?php foreach ($articles as $article) { ?>
<li>
<img src="public_html/images/example.jpg" height="250" width="250">
<br />
<a href="public_html/article.php?id=<?php echo
$article['article_id'];?>">
<?php echo $article['article_title'];?>
</a>
- <small>
posted <?php echo date('l jS', $article['article_timestamp'])?>
</small>
</li>
<?php } ?>
</ol>
answered Nov 14 '18 at 20:27
MichaelvEMichaelvE
1,2981311
add a comment |
0
I would recommend looking into something like CSS Grid to get the layout you want. But a simple way to solve this will be to float your list items to the left. Include the following style tags before your code:
<style>
ul li { float:left;}
</style>
<ol>
<?php foreach ($articles as $article) { ?>
<li>
<img src="public_html/images/example.jpg" height="250" width="250">
<br />
<a href="public_html/article.php?id=<?php echo
$article['article_id'];?>">
<?php echo $article['article_title'];?>
</a>
- <small>
posted <?php echo date('l jS', $article['article_timestamp'])?>
</small>
</li>
<?php } ?>
</ol>
answered Nov 14 '18 at 20:27
MichaelvEMichaelvE
1,2981311
add a comment |
0
0
0
I would recommend looking into something like CSS Grid to get the layout you want. But a simple way to solve this will be to float your list items to the left. Include the following style tags before your code:
<style>
ul li { float:left;}
</style>
<ol>
<?php foreach ($articles as $article) { ?>
<li>
<img src="public_html/images/example.jpg" height="250" width="250">
<br />
<a href="public_html/article.php?id=<?php echo
$article['article_id'];?>">
<?php echo $article['article_title'];?>
</a>
- <small>
posted <?php echo date('l jS', $article['article_timestamp'])?>
</small>
</li>
<?php } ?>
</ol>
answered Nov 14 '18 at 20:27
MichaelvEMichaelvE
1,2981311
I would recommend looking into something like CSS Grid to get the layout you want. But a simple way to solve this will be to float your list items to the left. Include the following style tags before your code:
<style>
ul li { float:left;}
</style>
<ol>
<?php foreach ($articles as $article) { ?>
<li>
<img src="public_html/images/example.jpg" height="250" width="250">
<br />
<a href="public_html/article.php?id=<?php echo
$article['article_id'];?>">
<?php echo $article['article_title'];?>
</a>
- <small>
posted <?php echo date('l jS', $article['article_timestamp'])?>
</small>
</li>
<?php } ?>
</ol>
answered Nov 14 '18 at 20:27
MichaelvEMichaelvE
1,2981311
answered Nov 14 '18 at 20:27
MichaelvEMichaelvE
1,2981311
answered Nov 14 '18 at 20:27
MichaelvEMichaelvE
1,2981311
answered Nov 14 '18 at 20:27
MichaelvEMichaelvE
1,2981311
1,2981311
add a comment |
add a comment |
0
You could just use simple css:
li {
display: inline-block;
}
answered Nov 14 '18 at 20:29
BenoitLussierBenoitLussier
121210
add a comment |
0
You could just use simple css:
li {
display: inline-block;
}
answered Nov 14 '18 at 20:29
BenoitLussierBenoitLussier
121210
add a comment |
0
0
0
You could just use simple css:
li {
display: inline-block;
}
answered Nov 14 '18 at 20:29
BenoitLussierBenoitLussier
121210
You could just use simple css:
li {
display: inline-block;
}
answered Nov 14 '18 at 20:29
BenoitLussierBenoitLussier
121210
answered Nov 14 '18 at 20:29
BenoitLussierBenoitLussier
121210
answered Nov 14 '18 at 20:29
BenoitLussierBenoitLussier
121210
answered Nov 14 '18 at 20:29
BenoitLussierBenoitLussier
121210
121210
add a comment |
add a comment |
0
One way is to go with bootstrap and your code would then look something like this:
<div class="container">
<ol class="row">
<?php foreach ($articles as $article) { ?>
<li class="col-sm">
<img src="public_html/images/example.jpg" height="250" width="250">
<br />
<a href="public_html/article.php?id=<?php echo $article['article_id'];?>">
<?php echo $article['article_title'];?>
</a>
- <small>
posted <?php echo date('l jS', $article['article_timestamp'])?>
</small>
</li>
<?php } ?>
</ol>
</div>
Dont forget to install the bootstrap CSS file into your code Quickstart to bootstrap
answered Nov 14 '18 at 20:22
Edwin KrauseEdwin Krause
1,09111122
add a comment |
0
One way is to go with bootstrap and your code would then look something like this:
<div class="container">
<ol class="row">
<?php foreach ($articles as $article) { ?>
<li class="col-sm">
<img src="public_html/images/example.jpg" height="250" width="250">
<br />
<a href="public_html/article.php?id=<?php echo $article['article_id'];?>">
<?php echo $article['article_title'];?>
</a>
- <small>
posted <?php echo date('l jS', $article['article_timestamp'])?>
</small>
</li>
<?php } ?>
</ol>
</div>
Dont forget to install the bootstrap CSS file into your code Quickstart to bootstrap
answered Nov 14 '18 at 20:22
Edwin KrauseEdwin Krause
1,09111122
add a comment |
0
0
0
One way is to go with bootstrap and your code would then look something like this:
<div class="container">
<ol class="row">
<?php foreach ($articles as $article) { ?>
<li class="col-sm">
<img src="public_html/images/example.jpg" height="250" width="250">
<br />
<a href="public_html/article.php?id=<?php echo $article['article_id'];?>">
<?php echo $article['article_title'];?>
</a>
- <small>
posted <?php echo date('l jS', $article['article_timestamp'])?>
</small>
</li>
<?php } ?>
</ol>
</div>
Dont forget to install the bootstrap CSS file into your code Quickstart to bootstrap
answered Nov 14 '18 at 20:22
Edwin KrauseEdwin Krause
1,09111122
One way is to go with bootstrap and your code would then look something like this:
<div class="container">
<ol class="row">
<?php foreach ($articles as $article) { ?>
<li class="col-sm">
<img src="public_html/images/example.jpg" height="250" width="250">
<br />
<a href="public_html/article.php?id=<?php echo $article['article_id'];?>">
<?php echo $article['article_title'];?>
</a>
- <small>
posted <?php echo date('l jS', $article['article_timestamp'])?>
</small>
</li>
<?php } ?>
</ol>
</div>
Dont forget to install the bootstrap CSS file into your code Quickstart to bootstrap
answered Nov 14 '18 at 20:22
Edwin KrauseEdwin Krause
1,09111122
edited Nov 14 '18 at 21:17
answered Nov 14 '18 at 20:22
Edwin KrauseEdwin Krause
1,09111122
answered Nov 14 '18 at 20:22
Edwin KrauseEdwin Krause
1,09111122
answered Nov 14 '18 at 20:22
Edwin KrauseEdwin Krause
1,09111122
1,09111122
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53307970%2fphp-html-echo-li-tag-without-break-line%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Have you tried resolving this yourself first?
– Funk Forty Niner
Nov 14 '18 at 20:08
1
This is the default behavior of Ordered and Unordered list (UL/OL) that the list items (LI) are block level elements. You have to give the li a style display:block-inline.
– Nawed Khan
Nov 14 '18 at 20:11
Think about using a framework like bootstrap: getbootstrap.com/docs/4.1/layout/grid
– Edwin Krause
Nov 14 '18 at 20:15
1
Possible duplicate of How do I prevent a line break occurring before an unordered list?
– Martin
Nov 14 '18 at 20:34